Custom ColorPicker

The ColorPicker enables you to customize its appearance.

The component supports the following options:

Customizing the Palette Popup

To specify the rendering, columns, and tile sizes of the ColorPicker, and to customize the color formats of its palette, use the paletteSettings option.

class App extends React.Component {
    selectedColor = 'rgba(237, 126, 50, 1)';
    paletteSettings = {
        palette: [
            "#f0d0c9", "#e2a293", "#d4735e", "#65281a",
            "#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
            "#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
            "#e1dca5", "#d0c974", "#a29a36", "#514d1b",
            "#c6d9f0", "#8db3e2", "#548dd4", "#17365d"
        ],
        columns: 5,
        tileSize: 30
    };

    render() {
        return (
            <ColorPicker
                defaultValue={this.selectedColor}
                paletteSettings={this.paletteSettings}
            />
        );
    }
}

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

Customizing the Gradient Popup

To customize the gradient options of the ColorPicker, use the gradientSettings configuration.

The following example demonstrates how to specify if the opacity slider of the ColorGradient will be displayed.

class App extends React.Component {
    selectedColor = 'rgba(237, 126, 50, 1)';
    gradientSettings = {
       opacity: false
    };

    render() {
        return (
            <ColorPicker
                defaultValue={this.selectedColor}
                view={'gradient'}
                gradientSettings={this.gradientSettings}
            />
        );
    }
}

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

Displaying Kendo UI Icons

To display an existing Kendo UI icon in the ColorPicker button, provide the name of that icon without the k-icon class and the k-i- prefix to the icon property of the component. For example, instead of k-icon k-i-edit-tools, add edit-tools.

class App extends React.Component {
    selectedColor = 'rgba(237, 126, 50, 1)';

    render() {
        return (
            <ColorPicker
                view={'gradient'}
                icon={'edit-tools'}
            />
        );
    }
}

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

Displaying Custom Icons

To display a custom icon in the ColorPicker button, provide the full CSS class name of the icon to the iconClassName property of the component.

class App extends React.Component {
    selectedColor = 'rgba(237, 126, 50, 1)';

    render() {
        return (
            <ColorPicker
                view={'gradient'}
                iconClassName={'k-icon k-i-edit-tools'}
            />
        );
    }
}

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