¿Cómo crear un selector de color en ReactJS?

En este artículo, vamos a aprender cómo podemos crear Color Picker en ReactJs. Un selector de color es un widget de interfaz gráfica de usuario, que generalmente se encuentra dentro del software de gráficos o en línea, que se usa para seleccionar colores y, a veces, para crear esquemas de color.

React es una biblioteca JavaScript front-end gratuita y de código abierto para crear interfaces de usuario o componentes de interfaz de usuario. Es mantenido por Facebook y una comunidad de desarrolladores individuales y empresas.

Enfoque: para crear nuestro selector de color, vamos a utilizar el paquete de paleta de colores de reacción porque es potente, liviano y totalmente personalizable. Después de eso, agregaremos nuestro selector de color en nuestra página de inicio usando el paquete instalado.

Crear aplicación ReactJS: 

Paso 1: puede crear un nuevo proyecto ReactJs usando el siguiente comando:

npx create-react-app gfg

Paso 2: ahora instalaremos el paquete react-color-palette usando el siguiente comando:

npm install react-color-palette

Estructura del proyecto: Se verá así.

Agregar selector de color: en este ejemplo, agregaremos el selector de color en la página de inicio de nuestra aplicación usando el paquete que instalamos. Para ello, agregue el siguiente contenido en el archivo 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>
  )
};

Explicación: en el ejemplo anterior primero, estamos importando el ColorPicker y el archivo CSS para nuestro selector de color usando el paquete react-color-palette. Después de eso, estamos usando nuestro gancho useColor() para establecer el color inicial. Luego agregaremos nuestro selector de color usando el componente ColorPicker del paquete instalado.

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

npm start

Producción: