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! )