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

在本文中，我们将探讨如何在 ReactJS 中创建和使用颜色选择器。颜色选择器可以定义为图形用户界面小部件，通常在某些图形软件中找到或在线使用，用于选择/选择颜色，有时也用于创建新的颜色主题。

React 是一个免费且开源的前端 JavaScript 库，用于构建用户界面或 UI 组件。它由 Facebook 和一群个人贡献者维护，他们不断对其进行更新。

方法

我们可以按照以下步骤创建颜色选择器：

• 首先，我们需要使用 react-color-palette 包。

• 这个包将帮助我们满足创建颜色选择器所需的所有基本要求。

• 导入后，我们可以使用它的函数来选择颜色。

语法

• 创建 React 应用程序

npx create-react-app myApp

• 安装 react-color-palette 包

npm install react-color-palette

示例

在下面的示例中，我们使用 ReactJS 中的 react-color-palette 包创建一个颜色选择器。

# App.js

import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/lib/css/styles.css";
export default function ColorPickertp(){
   const [color, setColor] = useColor("hex", "#121212");
   return (
      <div>
         <h1>Welcome To Tutorials Point</h1>
         <ColorPicker width={456} height={228}
            color={color}
            onChange={setColor} hideHSV dark />;
      </div>
   )
};

输出

使用 npm start 启动上述应用程序

Mayank Agarwal

更新于：2022年4月25日

1K+ 浏览量

启动您的 职业生涯

通过完成课程获得认证

开始