Reactjs guru - Discover the Best Open Source React, Next.js & Node.js Projects

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 yo...

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:

bash

npx create-react-app my-react-app

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

bash

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:

bash

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.

jsx

1import React from "react";
2import {SketchPicker} from "react-color";
3import "./styles.css";
4export default function App() {
5 return (
6 <div className="App">
7 <div className="container">
8 <SketchPicker/>
9 </div>
10 </div>
11 );
12}

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

jsx

1import React from "react";
2import {SketchPicker} from "react-color";
3import "./styles.css";
4export default function App() {
5 return (
6 <div className="App">
7 <div className="container">
8 <SketchPicker/>
9 <button>Open Color Picker</button>
10 </div>
11 </div>
12 );
13}
14

Now add some styles for the color picker app looks good

css

1body{
2 margin: 0;
3 }
4.App{
5 width:100%;
6 min-height: 100vh;
7 display: flex;
8 flex-direction: column;
9 align-items: center;
10 justify-content: center;
11}
12.container{
13 position: relative;
14}
15button{
16 padding:10px;
17}
18

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

jsx

1import React from "react";
2import {SketchPicker} from "react-color";
3import "./styles.css";
4export default function App() {
5const pickerStyle = {
6 default: {
7 picker: {
8 position: "absolute",
9 bottom: "30px",
10 left: "100px"
11 }
12 }
13 };
14 return (
15 <div className="App">
16 <div className="container">
17 <SketchPicker styles={pickerStyle}/>
18 <button>Open Color Picker</button>
19 </div>
20 </div>
21 );
22}
23

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.

jsx

1import React,{ useState } from "react";
2import {SketchPicker} from "react-color";
3import "./styles.css";
4export default function App() {
5const [color, setColor] = useState("lightblue");
6const pickerStyle = {
7 default: {
8 picker: {
9 position: "absolute",
10 bottom: "30px",
11 left: "100px"
12 }
13 }
14 };
15 return (
16 <div className="App" style={{ background: color }}>
17 <div className="container">
18 <SketchPicker 
19 styles={pickerStyle}
20 color={color}
21 onChange={(updatedColor) => setColor(updatedColor.hex)}
22/>
23 <button>Open Color Picker</button>
24 </div>
25 </div>
26 );
27}
28

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.

jsx

1import React, { useState } from "react";
2import { SketchPicker } from "react-color";
3import "./styles.css";
4export default function App() {
5 const [color, setColor] = useState("lightblue");
6 const [hidden, setHidden] = useState(false);
7 const pickerStyle = {
8 default: {
9 picker: {
10 position: "absolute",
11 bottom: "30px",
12 left: "100px"
13 }
14 }
15 };
16 return (
17 <div className="App" style={{ background: color }}>
18 <div className="container">
19 {hidden && (
20 <SketchPicker
21 styles={pickerStyle}
22 color={color}
23 onChange={(updatedColor) => setColor(updatedColor.hex)}
24 />
25 )}
26 <button onClick={() => setHidden(!hidden)}>
27 {hidden ? "Close Color Picker" : "Open Color Picker"}
28 </button>
29 </div>
30 </div>
31 );
32}
33

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 Create Color Picker In React Js

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 Color Picker App Attractive

Summary

About Dev Samay