controlled component?

[dkadrios]

How does one go about creating a controlled component, e.g. one where the value can be changed externally?

As a simple example, here's the sample code from README with an additional button:

import {
  CircularInput,
  CircularTrack,
  CircularProgress,
  CircularThumb
} from 'react-circular-input'

export default () => {
  const [value, setValue] = useState(0.25)

  return (
    <>
      <button 
        type="button" 
        onClick={() => { setValue(v => v + 12 }}
      >
        add 12
      </button>

      <CircularInput value={value} onChange={setValue}>
        <CircularTrack />
        <CircularProgress />
        <CircularThumb />
      </CircularInput>
    </>
  )
}

The component flickers when the value changes but does not update. It looks like we can only set the value initially and from then on there's no way to update it?

[dkadrios]

My bad, please ignore. I'd forgotten that value only goes from 0 to 1.0. It does work if you send fractional values.

[petecorreia]

Not your fault. I regret not doing an internal mapping that doesn't impose the 0-1 range to the value on the consumer. Might work on that when I have time - accepting a min/max would map those values internally to [0-1] kind of thing.

Glad you worked it out!