< DHTMLX Suite 8.3: Colorpicker Transparency Scale, Extended Functionality of Columns’ Header and Footer in Grid/TreeGrid, and More
Download

React Color Picker

An intuitive React color picker component from the leading-edge Suite UI library.
Enjoy a wide color palette and unlimited customization opportunities.

Download
View more demos
Compatible with:
Vue.js Vue.js
JavaScript JavaScript
Angular Angular

Product Features

  • Cross-browser compatibility
  • 2 modes: inline and popup color picker
  • HEX color format
  • Ability to manage custom colors
  • Custom color palette
  • Accessibility support
  • Ability to add gray shades to a palette
  • Flexible JavaScript API
  • Full customization
  • Smooth integration with dhtmlxForm and dhtmlxPopup
  • Support for localization

Live React Color Picker Example

Our React color picker can be easily integrated into a popup.

View more demos

How It Works

5 Quick Steps to Integrate ColorPicker with React
1
Create a ColorPicker.js file and import files and styles of ColorPicker
2
Create ColorPicker class, which extends the Component class
3
Add an empty container for ColorPicker with the reference to it in the el property using the ref property
4
When the component is initialized, initialize ColorPicker and attach the instance of Calendar to the container with the reference to it in the el property
5
Specify a set of configuration properties if needed
Check the demo on Github

Why Choose a React Color Picker by DHTMLX?

React color picker with an extending color palette

You can add any element you want: a stand-alone color picker, a color palette or combine both of them. Extend users’ choices equipping your palette with a section of gray shades and including custom-made colors. DHTMLX ColorPicker supports colors in Hex file format.

Fully-customized React color picker component

Modify a ColorPicker widget by adding new CSS classes. You can adapt any element of the color picker and palette to suit your web environment: change background colors, specify border width, set palette shapes, etc. Localization is supported through configuring a multi-language interface.

Few-steps integration with Suite UI controls

A default DHTMLX color picker has a selection box with a slider and text field for recording Hex codes. You can use our React color picker component as an inline widget or add it to a popup window. Besides, you can integrate the component in an input field of dhtmlxForm.

Vue.js and Angular color picker

Apart from React, our simple color picker can be used with today’s most popular web frameworks like Vue.js and Angular. Download a free 30-day trial and look how Suite UI can work with your project. Use our integrations guides and samples to create a color picker best suited to your needs.

Support & Learning Resources

We provide comprehensive documentation with technical samples. Moreover, our dedicated support team is fast and qualified. Find the suitable way to get support:

Documentation
Support
Forum
Samples

Other Suite Components

Calendar
Chart
ColorPicker
ComboBox
DataView
DatePicker
Form
Grid
Layout
List
Menu
Message
Popup
Ribbon
Sidebar
Slider
Tabbar
TimePicker
Toolbar
Tree
TreeGrid
Window
demo-screenshot

File manager built with the help of Suite components: Layout, Grid, DataView, Toolbar, etc.

Try All UI Components for Free

All UI components for React are part of the dhtmlxSuite library. You can download the free trial version of Suite andbenefit from:

30 days of free evaluation

Official technical support

Full toolkit of 21 components

Compatibility with React, Angular, and Vue.js

Download

Need help with dhtmlxColorPicker integration into your app? Contact us