Create a color picker in React

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
2. Usage
3. Output

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.

Demo & Source Code

GitHub Repository