Building Custom Components

Announcements
1

I did a live stream on Twitch with @leeberg. The recording is available here.

6 Likes
2

Just to bring this back into the limelight…this video is the mutz nutz…this is how I learnt to build my custom components, and it’s certainly worth watching about 10+ times, because after that amount of times some of it might make more sense to you, then when it does go build a component.

Just to hopefully add some more info on this, I like to look through https://reactjsexample.com/ then if you like what you see in the code, it mentions what is is IMPORTING like for my most recent project I done, it said react-circle.
Then head over to https://www.npmjs.com/ and search for the component you want to build. Tend to find the less dependencies the better. Then open your copy of https://github.com/ironmansoftware/ud-custom-control-template
Edit the component JSX file to import your custom component and tweak any of the settings into PROPS so you can pass them as parameters in the function which runs the custom component. :grin:

This took me a non react JS person about 1 hour to nail all the parameters testing and building it, then little more time sticking it on the marketplace:-
https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDCircle

The end JSX file looks like:-

import React from 'react';
import Circle from 'react-circle';
class <%=$PLASTER_PARAM_ControlName%> extends React.Component {

render() {

return (
  <Circle
  animate={true} // Boolean: Animated/Static progress
  animationDuration="1s" //String: Length of animation
  responsive={this.props.responsive} // Boolean: Make SVG adapt to parent size
  size={this.props.size} // Number: Defines the size of the circle.
  lineWidth={this.props.lineWidth} // Number: Defines the thickness of the circle's stroke.
  progress={this.props.progress} // Number: Update to change the progress and percentage.
  progressColor={this.props.progressColor}  // String: Color of "progress" portion of circle.
  bgColor={this.props.bgColor} // String: Color of "empty" portion of circle.
  textColor={this.props.textColor} // String: Color of percentage text color.
  textStyle={this.props.textStyle}
  percentSpacing={this.props.percentSpacing} // Number: Adjust spacing of "%" symbol and number.
  roundedStroke={this.props.roundedStroke} // Boolean: Rounded/Flat line ends
  showPercentage={this.props.showPercentage} // Boolean: Show/hide percentage.
  showPercentageSymbol={this.props.showPercentageSymbol} // Boolean: Show/hide only the "%" symbol.
/>
);
  }
}

export default <%=$PLASTER_PARAM_ControlName%>

Compare this to https://www.npmjs.com/package/react-circle and you should see how the PROPS define the PARAMETERS you pass in the function

1 Like