how show a dispaycustom Element

[padmanabhampakki]

Hi,

I want to show a center value with % symbol like 59%. any one helps to me this issue. how to create a component and how to pass the display custom attribute.

[natotthomer]

I would also love a better understanding of how to use displayCustom. In addition, it would be great if displayCustom could take either a value (a string or an int) or a component for more flexibility. I have an object whose keys I want to map to different positions on the Knob component. I'd love to be able to display the value of the currently selected key as the display.

[hatamsoyunov]

@padmanabhampakki @natotthomer

I solve like this:

1. Initially, for Knob to work without error, do this https://github.com/joshjg/react-canvas-knob/issues/21#issuecomment-389591269.

2. In the Knob component, add context 'this' in displayCustom().

   ...
   renderCenter = () => {
   const {
   displayCustom,
   displayInput,
   disableTextInput,
   readOnly,
   value
   } = this.props;
   
   if (displayInput) {
   return (
     <input
       style={this.inputStyle()}
       type="text"
       value={value}
       onChange={this.handleTextInput}
       onKeyDown={this.handleArrowKey}
       readOnly={readOnly || disableTextInput}
     />
   );
   } else if (displayCustom && typeof displayCustom === 'function') {
   return displayCustom(this); // Adding context 'this'
   }
   return null;
   };
   ...

3. Write function

   
   knobDisplayCustom(knob) {
   return (
   <input
     style={knob.inputStyle()}
     type="text"
     value={knob.props.value + '%'} // Add percentage symbol
     onChange={knob.handleTextInput}
     onKeyDown={knob.handleArrowKey}
     readOnly={knob.readOnly || knob.disableTextInput}
   />
   );
   }

<Knob value={this.props.percent} lineCap={'round'} width={125} height={125} bgColor="#e57d2124" fgColor="#E57D21" thickness={0.06} readOnly={true} displayInput={false} displayCustom={this.knobDisplayCustom} />

Done! )