Inputs / ColorGradient / Getting Started
material theme

Getting Started with KendoReact ColorGradient

The KendoReact ColorGradient renders a gradient, a hue and an alpha slider, and inputs to manually enter the desired color.

The KendoReact ColorGradient 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 ColorGradient in action.

class App extends React.Component {
    state = { value: 'rgba(195, 0, 47, 1)' };

    render() {
        return (
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <div style={{
                    backgroundColor: this.state.value,
                    width: '490px',
                    height: '290px',
                    backgroundImage: 'url("https://demos.telerik.com/kendo-ui/content/web/colorpicker/motor.png")'
                }} />
                <ColorGradient
                    defaultValue={this.state.value}
                    value={this.state.value}
                    onChange={this.onChange}
                    style={{ marginTop: '10px' }}
                />
            </div >
        );
    }

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

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

Functionality and Features

Is this article helpful?

Not finding the help you need?

Contact Support