Controlled Mode

By default, the ColorPicker is in an uncontrolled state.

The ColorPicker provides options for:

Controlling the Value

To manage the value of the ColorPicker:

  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(237, 126, 50, 1)' };

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

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

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

Controlling the Popup State

To manage the popup and set the open state of the ColorPicker, use its open property.

The following example demonstrates how to control the state of the ColorPicker upon display.

class App extends React.Component {
    state = { open: false };

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-md-6 example-col">
                    <p>Controlled ColorPicker</p>
                    <ColorPicker open={this.state.open} />&nbsp;
                    <button className="k-button k-primary" onClick={this.onClick}>Toggle</button>
                </div>
                <div className="col-xs-12 col-md-6 example-col">
                    <p>Always shown</p>
                    <ColorPicker
                        open={true}
                    />
                </div>
            </div>
        );
    }

    onClick = event => this.setState({ open: !this.state.open });
}

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