如何在 ReactJS 中创建颜色选择器？

在本文中，我们将学习如何在 ReactJs 中创建颜色选择器。颜色选择器是一个图形用户界面小部件，通常在图形软件或在线中找到，用于选择颜色，有时用于创建配色方案。

React 是一个免费的开源前端 JavaScript 库，用于构建用户界面或 UI 组件。它由 Facebook 和一个由个人开发者和公司组成的社区维护。

方法：要创建我们的颜色选择器，我们将使用 react-color-palette 包，因为它功能强大、轻量级且完全可定制。之后，我们将使用已安装的软件包在我们的主页上添加我们的颜色选择器。

创建 ReactJS 应用程序：

第 1 步：您可以使用以下命令创建一个新的 ReactJs 项目：

npx create-react-app gfg

第 2 步：现在我们将使用以下命令安装 react-color-palette 包：

npm install react-color-palette

项目结构：它看起来像这样。

添加颜色选择器：在此示例中，我们将使用我们安装的包在应用程序的主页上添加颜色选择器。为此，在App.js文件中添加以下内容。

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 (
    

        
Color Picker - GeeksforGeeks
        ;
    
  )
};

说明：在上面的示例中，首先，我们使用 react-color-palette 包为我们的颜色选择器导入 ColorPicker 和 CSS 文件。之后，我们使用我们的 useColor() 钩子来设置初始颜色。然后我们将使用已安装包的 ColorPicker 组件添加我们的颜色选择器。

运行应用程序的步骤：在终端中运行以下命令来运行应用程序。

npm start

输出：