Getting Started with KendoReact ColorPalette

The KendoReact ColorPalette renders colors by using sets of predefined colors (color presets) or by implementing a custom color palette.

The KendoReact ColorPalette component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-inputs package.

Basic Usage

The following example demonstrates the ColorPalette in action.

<style>
    .example {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin: 0 auto;
        width: 700px;
        color: #44403f;
    }
    .k-colorpalette .k-item { border-radius: 50%; }
    .description {
        width: 340px;
        margin-top: 35px;
        align-self: flex-start;
    }
    h1 { font-size: 32px; font-weight: bold; margin-bottom: 20px; }
    p {
        font-size: 20px;
        letter-spacing: .025em;
        margin-bottom: 0;
    }
    .description span {
        color: #8e8682;
        display: block;
        font-size: 13px;
    }
    .selected-color {
        margin: 40px 0 10px 0;
    }
    .img {
        width: 100%;
        height: 480px;
        margin-right: 10px;
        background-size: cover;
        background-image: url('https://www.telerik.com/kendo-react-ui-develop/images/colorpalette-demo-img.png');
    }
    button {
        display: block;
        background: transparent;
        color: #44403f;
        border-color: currentColor;
        width: 200px;
        margin-top: 40px;
        padding: 8px;
        font-size: 20px;
    }
    button:hover {
        background: #0083FF;
        color: #fff;
        border-color: currentColor;
    }
</style>
class App extends React.Component {
    state = { value: '#a21616' };

    render() {
        return (
            <div className="example">
                <div className="img" style={{ backgroundColor: this.state.value }} />
                <div className="description">
                    <h1>Comfy T-shirt with a cut-away neckline</h1>
                    <p className="price">$19.99</p>
                    <span>incl. VAT</span>

                    <p className="selected-color">{ colorNames[this.state.value] }</p>
                    <ColorPalette
                        palette={['#37399b', '#a81c85', '#0ab3cc', '#2f7d20', '#a21616']}
                        value={this.state.value}
                        onChange={this.onChange}
                        tileSize={40}
                    />
                    <button className="k-button">Add to cart</button>
                </div>
            </div >
        );
    }

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

const colorNames = {
    '#37399b': 'Navy blue',
    '#a81c85': 'Violet',
    '#0ab3cc': 'Light blue',
    '#2f7d20': 'Forest green',
    '#a21616': 'Dark red'
}

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

Functionality and Features

Events

The following example demonstrates the change event of the ColorPalette.

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

        this.state = { logs: [] };
    }

    render() {
        return (
            <div className="row">
                <div className="col-md-6">
                    <ColorPalette onChange={this.onChange} palette='basic' />
                </div>
                <div className="example-config col-md-6" style={{ height: '180px' }}>
                    <h5>Log: </h5>
                    <ul className="event-log">
                        {this.renderLogs()}
                    </ul>
                </div>
            </div>
        );
    }

    renderLogs = () => {
        return this.state.logs.map((log, index) => {
            return <li key={index}>{log}</li>;
        });
    }

    onChange = (e) => {
        const logs = this.state.logs.slice();
        logs.unshift(`hex: ${e.value}, rgba: ${e.rgbaValue}`);

        this.setState({ logs });
    }
}

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