How to create Color Picker in ReactJS ?

In this article, we are going to learn how we can create Color Picker in ReactJs. A color picker is a graphical user interface widget, usually found within graphics software or online, used to select colors and sometimes to create color schemes.

React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies.

Approach: To create our color picker we are going to use the react-color-palette package because it is powerful, lightweight, and fully customizable. After that, we will add our color picker on our homepage using the installed package.

Create ReactJS Application:

Step 1: You can create a new ReactJs project using the below command:

npx create-react-app gfg

Step 2: Now we will install the react-color-palette package using the below command:

npm install react-color-palette

Project Structure: It will look like this.

Adding Color Picker: In this example, we are going to add the color picker on the homepage of our app using the package that we installed. For this, add the below content in the App.js file.

App.js

import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/lib/css/styles.css";

export default function ColorPickerGfg(){
  const [color, setColor] = useColor("hex", "#121212");

  return (
    <div>
        <h1>Color Picker - GeeksforGeeks</h1>
        <ColorPicker width={456} height={228}
                   color={color}
                   onChange={setColor} hideHSV dark />;
    </div>
  )
};

Explanation: In the above example first, we are importing the ColorPicker and the CSS file for our color picker using the react-color-palette package. After that, we are using our useColor() hook to set the initial color. Then we will add our color picker using the ColorPicker component of the installed package.

Steps to run the application: Run the below command in the terminal to run the app.

npm start

Output:

My Personal Notes arrow_drop_up

Save