How To Create Color Picker In React Js

Hello, guys in this tutorial I will be showing you how to make a simple color picker project where we have a single button and once you click on it you get on the color picker and when you change any color it updates in the background. in this project, we use a third-party library that provides a ready-to-use component. One popular library for this is react-color so let’s start.

Steps To Create Color Picker in React

• Step 1 – Create React App
• Step 2 – Install Color Picker Library
• Step 3 – Import Color Picker Module in App.js
• Step 4 – Make the color picker app attractive

Step 1 – Create React App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

Step 2 – Install Color Picker Library

In this step, execute the following command to install the color picker library into your react app:

npm install react-color --save

Step 3 – Import Color Picker Module in App.js

Now import the module into your app.js file or the component where you wish to use it.

import React from "react";
import {SketchPicker} from "react-color";
import "./styles.css";
export default function App() {
  return (
    <div className="App">
      <div className="container">
        <SketchPicker/>
      </div>
    </div>
   );
}

Now, run the project by using the ‘npm start‘ command and check the result.

Step 4 – Make Color Picker App Attractive

Now we add some extra functionality like adding one button for the open color picker and when you change any then the background should be changed.

so first we add one button as open color picker

import React from "react";
import {SketchPicker} from "react-color";
import "./styles.css";
export default function App() {
  return (
    <div className="App">
      <div className="container">
        <SketchPicker/>
        <button>Open Color Picker</button>
      </div>
    </div>
   );
}

Now add some styles for the color picker app looks good

body{
    margin: 0;
  }
.App{
  width:100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.container{
  position: relative;
}
button{
  padding:10px;
}

Here we defined the pickerStyle object, which contains some styles that are used by the color picker.

import React from "react";
import {SketchPicker} from "react-color";
import "./styles.css";
export default function App() {
const pickerStyle = {
    default: {
      picker: {
        position: "absolute",
        bottom: "30px",
        left: "100px"
      }
    }
  };
  return (
    <div className="App">
      <div className="container">
        <SketchPicker styles={pickerStyle}/>
        <button>Open Color Picker</button>
      </div>
    </div>
   );
}

Now we are implementing it when we select the color and then change the background color. so for that, we use useState hook. Here color variable is initialized to lightblue. means initially color picker and body background color is lightblue. we use onChange for updating color value based on changing the color.

import React,{ useState } from "react";
import {SketchPicker} from "react-color";
import "./styles.css";
export default function App() {
const [color, setColor] = useState("lightblue");
const pickerStyle = {
    default: {
      picker: {
        position: "absolute",
        bottom: "30px",
        left: "100px"
      }
    }
  };
  return (
    <div className="App" style={{ background: color }}>
      <div className="container">
        <SketchPicker 
          styles={pickerStyle}
					color={color}
          onChange={(updatedColor) => setColor(updatedColor.hex)}
/>
        <button>Open Color Picker</button>
      </div>
    </div>
   );
}

Now we are going to implement a color picker toggled on and off based on button click. so for that, we use another state variable as hidden is initialized to false. indicating that the color picker is initially not visible. on button click event we update the value of hidden using setHidden function.

import React, { useState } from "react";
import { SketchPicker } from "react-color";
import "./styles.css";
export default function App() {
  const [color, setColor] = useState("lightblue");
  const [hidden, setHidden] = useState(false);
  const pickerStyle = {
    default: {
      picker: {
        position: "absolute",
        bottom: "30px",
        left: "100px"
      }
    }
  };
  return (
    <div className="App" style={{ background: color }}>
      <div className="container">
        {hidden && (
          <SketchPicker
            styles={pickerStyle}
            color={color}
            onChange={(updatedColor) => setColor(updatedColor.hex)}
          />
        )}

        <button onClick={() => setHidden(!hidden)}>
          {hidden ? "Close Color Picker" : "Open Color Picker"}
        </button>
      </div>
    </div>
  );
}

Output:

Summary

In summary, a color picker project the user to select a color from a color picker and apply it as the background color of a web page. The color picker is hidden by default and can be toggled on and off using a button. The selected color is stored in a state variable and used to set the background color of the web page.

You may Also like:

• How to Make E-commerce Product Card Using ReactJS
• How to Make Image Slider In React
• How to Make QR-Code Generator in React