All Components

This website hosts Kendo UI wrappers of Kendo UI for jQuery widgets intended to be used in the React ecosystem.

Go to the native Kendo UI implementations for React

ColorPicker Overview

The ColorPicker allows the user to select a color from a drop-down menu.

It is designed to replace the <input type="color"> HTML5 tag, which is not widely supported in browsers. The original input element is kept in the DOM. The value attribute element gets updated as the user selects a color which allows the submission of forms with ColorPickers.

The ColorPicker wrapper for React is a client-side wrapper for Kendo UI ColorPicker widget.

Basic Usage

The following example demonstrates the ColorPicker in action.

class ColorPickerContainer extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                    <ColorPicker />
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <ColorPickerContainer />,
    document.querySelector('my-app')
);

Features and Functionalities

Events

The following example demonstrates basic ColorPicker events. You can subscribe to all ColorPicker events by the handler name.

class ColorPickerContainer extends React.Component {
    constructor(props) {
        super(props);
    }

    onChange = (e) => {
        console.log("event :: change");
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                    <ColorPicker change={this.onChange} />
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <ColorPickerContainer />,
    document.querySelector('my-app')
);
In this article