How to add Color Picker in NextJS?

To add a color picker in Next.js, integrate a third-party library available on npm. This allows users to select colors easily, enhancing the interactivity and user experience of your application. In this article, we are going to learn how we can add a color picker in NextJS.

Approach

To add our color picker we are going to use the react-color-palette package. The react-color-palette package helps us to integrate different types of color pickers. So first, we will install the react-color-palette package, and then we will add a color picker on our homepage.

Steps to Create NextJS Application

You can create a new NextJs project using the below command:

npx create-next-app gfg
 
cd gfg

Install the required package: Now we will install the react-color-palette package using the below command:

npm i react-color-palette

Project Structure:

The updated dependencies in the package.json file are:

"dependencies": {
    "next": "14.2.4",
    "react": "^18",
    "react-color-palette": "^7.2.1",
    "react-dom": "^18"
}

After installing the package we can easily add color picker on any page in our app. For this example, we are going to add color picker to our homepage.

Example: This example demonstrates adding color picker in nextjs app with the help of react-color-palette npm package.

// Filename - pages/index.js

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

export default function SkeletonLoading() {
    const [color, setColor] = useColor("hex", "#121212");
    return (
        <div>
            <h2>NextJs Color Picker - GeeksforGeeks</h2>
            <ColorPicker width={456} height={228} 
            	color={color} onChange={setColor} hideHSV dark />
        </div>
    );
}

Explanation: In the above example first, we are importing the Color Picker component and after that, we are using useColor hook to store the value of the selected color. Then we are adding our color picker using the imported component.

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

npm run dev

Output: