如何在 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 啟動上述應用程式

更新於：2022年4月25日

1K+ 瀏覽量

啟動您的 職業生涯

透過完成課程獲得認證

開始
廣告