KendoReact
React ColorGradient
- Easily give users a way to select any color from a gradient or by manually entering HEX or RGB values.
- Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
- Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.
Overview
The React ColorGradient provides a beautiful and easy to use user interface for choosing a gradient color. The user can see the preview of the gradient and adjust it to the perfect color using the sliders and the value inputs.
See React ColorGradient Overview demo
Disabled ColorGradient
We can dynamically make this KendoReact component disabled or enabled to reflect the application state. In some cases, the user may need to complete. specific requirements before selecting a gradient color, and we can make it disabled until the requirements are met.
See React ColorGradient Disabled demo
Opacity Inputs
In some cases, the opacity of the gradient is not required, and we can remove the opacity input to make the component more compact. This can be done by setting just a single option that can also be set dynamically.
See React ColorGradient Opacity Inputs demo
Controlled and Uncontrolled Modes
By default, the React ColorGradient is in uncontrolled mode and it updates its value internally out of the box. Developers can also set it in controlled mode and sync its value with the application state.
See React ColorGradient Controlled and Uncontrolled Modes demo
All KendoReact Components
Animation
Common Utilities
Conversational UI
Data Grid
Data Query
Date Math
Drawing
Editor
Excel Export
File Manager
File Saver
Gantt Chart
Inputs
Layout
ListBox
ListView
Map
Notification
PDF Processing
PivotGrid
Popup
Progress Bars
Ripple
Scheduler
ScrollView
Sortable
Taskboard
TreeList
TreeView
Upload
Next Steps
See KendoReact in action and check out how much it can do out-of-the-box.
Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.
Try KendoReact with dedicated technical support.
