Controlled Mode

By default, the ColorGradient is in an uncontrolled state.

To manage the state of the ColorGradient:

  1. Use its value property.
  2. Handle the onChange event.
  3. Pass the new value through the props.
class App extends React.Component {
    state = { value: 'rgba(195, 0, 47, 1)' };

    render() {
        return (
            <div>
                <ColorGradient value={this.state.value} onChange={this.onChange} />
            </div>
        );
    }

    onChange = event => this.setState({ value: event.value });
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
In this article
 /