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 is distributed through NPM under the kendo-react-inputs package.

The ColorGradient component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Start Free Trial

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