Create a color picker in React
📅January 30, 2022
Today we’ll show you how to create a color picker in React. With the help of react-color NPM package, we can implement 13 different types of the pickers such as Chrome, Photoshop, Sketch and many more.
Here, we will take an example to pick color from picker component and display rgba or hex color code. Mostly we have to use a color picker in e-commerce or shopping sites.
Create a dropdown in React
1. Installation
Run the following command to install the react-color.
npm i react-color
2. Usage
Import the SketchPicker
from the react-color
and handle the onChange
event to capture the color.
import React, { useState } from 'react';
import { SketchPicker } from 'react-color';
function App() {
const [colorHexCode, setColorHexCode] = useState('#000000');
return (
<div className="App">
<h3>React color picker - <a href="https://codepremix.com">Code Premix</a></h3>
<SketchPicker
color={colorHexCode}
onChange={e => setColorHexCode(e.hex)} />
<div><b>Selected Color: </b>{colorHexCode}</div>
</div>
);
}
export default App;
3. Output
Let’s check the output in the browser.