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

Custom Colors

The ColorPicker enables you to display a custom list of colors.

To make the simple ColorPicker display custom colors, pass the colors in the palette argument. It renders only the white, black, and red colors. You can use any color in either short (3 digits) or long (6 digits) hex notation and omit the # sign.

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

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