React ColorPicker

React ColorPicker is an input component to select a color.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import {ColorPicker} from ‘primereact/colorpicker’;

…


This content originally appeared on DEV Community and was authored by PrimeTek

React ColorPicker is an input component to select a color.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import 

import {ColorPicker} from 'primereact/colorpicker';
Enter fullscreen mode Exit fullscreen mode

Getting Started

ColorPicker is used as a controlled input component with value and onChange properties.

<ColorPicker value={color} onChange={(e) => setColor(e.value)} />
Enter fullscreen mode Exit fullscreen mode

Formats

Default color format to use in value binding is "hex" and other possible values are "rgb" and "hsb". Example below has 3 colorpickers having default values with different formats.

<ColorPicker value={color1} onChange={(e) => setColor1(e.value)} />

<ColorPicker format="rgb" value={color2} onChange={(e) => setColor2(e.value)} />

<ColorPicker format="hsb" value={color3} onChange={(e) => setColor3(e.value)}/>
Enter fullscreen mode Exit fullscreen mode

Theming

ColorPicker supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact ColorPicker showcase for demos and documentation.


This content originally appeared on DEV Community and was authored by PrimeTek


Print Share Comment Cite Upload Translate Updates
APA

PrimeTek | Sciencx (2021-02-07T14:49:07+00:00) React ColorPicker. Retrieved from https://www.scien.cx/2021/02/07/react-colorpicker/

MLA
" » React ColorPicker." PrimeTek | Sciencx - Sunday February 7, 2021, https://www.scien.cx/2021/02/07/react-colorpicker/
HARVARD
PrimeTek | Sciencx Sunday February 7, 2021 » React ColorPicker., viewed ,<https://www.scien.cx/2021/02/07/react-colorpicker/>
VANCOUVER
PrimeTek | Sciencx - » React ColorPicker. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/07/react-colorpicker/
CHICAGO
" » React ColorPicker." PrimeTek | Sciencx - Accessed . https://www.scien.cx/2021/02/07/react-colorpicker/
IEEE
" » React ColorPicker." PrimeTek | Sciencx [Online]. Available: https://www.scien.cx/2021/02/07/react-colorpicker/. [Accessed: ]
rf:citation
» React ColorPicker | PrimeTek | Sciencx | https://www.scien.cx/2021/02/07/react-colorpicker/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts