npm 包 @hamavb/react-color 使用教程

简介

@hamavb/react-color 是一个针对 React 应用程序的颜色选择器组件库。

它提供了基础颜色选择器组件、自定义颜色选择器组件等丰富的 API，为 React 应用程序提供了方便灵活的颜色选择解决方案。

下面是一个示例，演示了如何使用这个库：

-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------------ - ---- ----------------------

-------- ----- -
  ----- ------- --------- - -----------------

  -------- ----------------------------------- -
    ----------------------------
  -

  ------ -
    -----
      ---------------
      ------------- ------------- --------------------------------------- --
      ------------ -----------
    ------
  --
-

------ ------- ----

该示例在一个 React 函数组件中渲染了一个 SketchPicker 组件。该组件接收一个 color 属性（默认为白色），然后在用户选择颜色时触发 handleChangeComplete 回调，该回调将选择的颜色设置为当前选择的颜色。最后，该组件在页面上呈现当前选择的颜色。

安装

首先，在你的项目中安装 @hamavb/react-color 。

npm install @hamavb/react-color

或者，如果你正在使用 Yarn，可以这样：

yarn add @hamavb/react-color

现在，你需要在你的应用程序中导入所需的组件。

如上文示例中的 SketchPicker 组件，可以按照如下方式导入：

import { SketchPicker } from '@hamavb/react-color';

使用

使用组件时，你可以通过传递属性来配置组件的显示和行为。

下面是 SketchPicker 组件的属性列表：

现在，让我们深入了解这些属性：

color

color 属性表示 SketchPicker 组件的初始颜色。

需要注意的是，如果你传递的是一个字符串，它必须是有效的 CSS 颜色值（例如 "#fff" 或 "rgb(255, 255, 255)"）.

如果你传递的是一个对象，必须包含 r、g、b 和 a 属性，分别表示 RGB 颜色和 Alpha 通道的值。例如：

{
  r: 255,
  g: 255,
  b: 255,
  a: 1,
}

onChange

onChange 属性是一个回调函数，用于在颜色选择器中选择颜色时触发，将选定的颜色作为参数传递给它。此回调在每次颜色选择更改时都会触发。

function handleChange(selectedColor) {
    console.log('你选择的颜色是:', selectedColor);
}

onChangeComplete

onChangeComplete 属性是另一个回调函数，与 onChange 不同的是，onChangeComplete 只在用户完成颜色选择时触发。

function handleChangeComplete(selectedColor) {
    console.log('用户选择了颜色:', selectedColor);
}

disableAlpha

disableAlpha 属性表示是否禁用 Alpha 通道选择。如果将其设置为 true，就无法选择 Alpha 通道。默认值为 false。

<SketchPicker disableAlpha={true} />

presetColors

presetColors 属性是一个字符串数组，用于在颜色选择器的预设选项中提供选项。

<SketchPicker presetColors={['#FF6900', '#FCB900', '#00D084', '#8ED1FC']} />

styles

styles 属性是一个 CSS 样式对象，用于自定义颜色选择器的外观（颜色选择器仅显示部分自定义样式）。

-- -------------------- ---- -------
----- ------------ - -
  ------- -
    ---------- -------
  --
  ------- -
    ------- -------
  --
  -------- -
    -------- -------
  --
--
------------- --------------------- --

总结

希望这篇文章可以帮助你学习如何使用 @hamavb/react-color，这个功能丰富的 React 应用程序颜色选择器组件库。

通过仔细研究和练习，你可以开始构建自己的颜色选择器组件，并根据自己的需求进行定制，以满足应用程序的需求！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005729781e8991b448e8c79