¿Cómo agregar Color Picker en NextJS?

En este artículo, vamos a aprender cómo podemos agregar un selector de color en NextJS. NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac. 

Enfoque: para agregar nuestro selector de color, vamos a usar el paquete react-color-palette. El paquete react-color-palette nos ayuda a integrar diferentes tipos de selectores de color. Primero, instalaremos el paquete react-color-palette y luego agregaremos un selector de color en nuestra página de inicio.

Crear aplicación NextJS: puede crear un nuevo proyecto NextJs usando el siguiente comando:

npx create-next-app gfg

Instale el paquete requerido: ahora instalaremos el paquete react-color-palette usando el siguiente comando:

npm i react-color-palette

Estructura del proyecto: Se verá así.

Agregar el selector de color: después de instalar el paquete, podemos agregar fácilmente el selector de color en cualquier página de nuestra aplicación. Para este ejemplo, vamos a agregar un selector de color a nuestra página de inicio.

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>
  )
}

Explicación: En el ejemplo anterior primero, estamos importando el componente Selector de color y después de eso, estamos usando el gancho useColor para almacenar el valor del color seleccionado. Luego estamos agregando nuestro selector de color usando el componente importado.

Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.

npm run dev

Producción: