Color picker in React using react-color

Today we’ll show you how to implement color picker in React using react-color. With the help of this npm package, we can implement 13 different types of the pickers such as Chrome, Photoshop, Sketch and many more.

In this article, we will take an example to pick color from color picker and display rgba or hex color code. Mostly we have to use a color picker in e-commerce or shopping sites.

Steps to implement color picker

  1. Setup a react project
  2. Install dependency
  3. Implement color picker
  4. Output

1. Setup a react project

In the first step, we will set up a basic react application using create-react-app. Refer to this link for more information.

Run the following code to create a react application.

2. Install dependency

As we mentioned, we will use the react-color npm package. So let’s install the npm package in react project by running the following command.

3. Implement color picker

Now it’s time to implement color picker in App.js file. Here we will display the SketchPicker component from the react-color and we will show the selected HEX color. You can also store the RGB color.

App.js

4. Output

Run the project and checkout the output.

Output - Color picker in React using react-color - Clue Mediator
Output – Color picker in React using react-color – Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

Github Repository StackBlitz Project

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *