# @antonlimar/react-color 中文文档

规范地址：https://npmcn.com/package/%40antonlimar/react-color/

版本：3\.0\.10
npm 元数据更新时间：2026-09-25T14:56:19.225Z
中文译文更新时间：2026-11-06T07:50:49.773Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40antonlimar/react-color
原文对照：https://npmcn.com/package/%40antonlimar/react-color/?lang=original
项目主页：https://antonlimar.github.io/react-color/
源码仓库：https://github.com/antonlimar/react-color

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：248 kB，311 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：react ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2026-05-21T04:04:31.155Z
- 最新版本发布：2026-09-25T14:56:19.055Z
- 近 30 天下载量：4070（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 5 个）

## 中文简介

从 Sketch 、 Photoshop 、 Chrome 和 更多 收集取色器

## 安装

```sh
npm install @antonlimar/react-color
```

也可以使用：`pnpm add @antonlimar/react-color`、`yarn add @antonlimar/react-color`、`bun add @antonlimar/react-color`

## README

# [反应颜色](https://antonlimar.github.io/react-color/)

[![Npm Version](https://img.shields.io/npm/v/@antonlimar/react-color.svg)](https://www.npmjs.com/package/@antonlimar/react-color) [![License](https://img.shields.io/npm/l/@antonlimar/react-color.svg)](https://npmcn.com/package/%40antonlimar/react-color/LICENSE) [![Downloads](https://img.shields.io/npm/dm/@antonlimar/react-color.svg)](https://npm-stat.com/charts.html?package=%40antonlimar%2Freact-color)

-   **14个不同的拾取者** - Sketch,相片店,克罗姆,谷歌等等
    
-   **让你自己去** - 利用构件组件制作自己的
    

## 叉子发展

这棵树被维持为现代化的分叉. 源版式、 npm 导出名称和面向代理人的常规记录如下: [`AGENTS.md`](https://npmcn.com/package/%40antonlimar/react-color/AGENTS.md)不编辑已生成 `es/` ; 使用来自 `package.json`。 。 。 .

**兼容性注释 :** 已公布的API在实用之处有意保持稳定,但存储器内部已经现代化。 特别是,运行时间 `propTypes` 因此 JavaScript 消费者应该依赖 Docs 和 TypeScript 输入而不是 `prop-types` 开发过程中的警告.

### 发展工作流程

现代化分支现在使用基于TypeScript的无害环境管理,用于软件包构建,用于测试,用于组件工作的Vitest,用于GitHub Pages文档网站的Vite `site/`。 。 。 .

| 命令 | 目的 |
| --- | --- |
| `npm run build` | 建立已公布的无害环境管理产出 `es/`。 。 。 . |
| `npm run test:unit` | 通过Vitest运行单元/UI测试套件. |
| `npm run test:site` | 运行导航和共享颜色状态的专用站点交互测试. |
| `npm run test:esm-consumption` | 建立包和烟检节点无害环境管理和捆绑消费路径. |
| `npm run test:watch` | 以监视模式启动 Vitest . |
| `npm run eslint` | 林特 `src`, (中文(简体) ), `site`, (中文(简体) ), `scripts`, (中文(简体) ), `test`,并用 ESLint 重播工具源. |
| `npm run storybook` | 在端口启动故事本 `6006`。 。 。 . |
| `npm run build-storybook` | 发送静态故事书网站 `.out/`。 。 。 . |
| `npm run site:dev` | 启动 GitHub 页面文档站点 `http://localhost:4173/`。 。 。 . |
| `npm run site:build` | 将 GitHub 页面文档站点构建为 `site/dist/`。 。 。 . |
| `npm run site:verify` | 运行站点交互测试,构建Pages应用程序,并验证元数据/输出. |
| `npm run typecheck` | 运行类型脚本检查 `src`, (中文(简体) ), `site`, (中文(简体) ), `scripts`,以及 `test`。 。 。 . |

已公布的成套文物仅限无害环境管理。 包裹暴露 `main` 财务报告和审定财务报表 `module` 通过 `es/index.js` 并显示根打字通过 `index.d.ts`。 。 。 .

### 包装互接符

包件只装有无害环境管理 `main`编号 :`module` 合同和合同 `exports` 绘制 root 条目和共同组件的映射。 生成的组件-当地CSS的文物按下列格式出版: `es/components` 并被需要的组件模块拉入.

-   Bundlers 和 TypeScript 工具链应该使用根名导入, 如 `import { SketchPicker } from '@antonlimar/react-color'`。 。 。 .
-   本地节点无害环境管理可以通过软件包解决根入 `exports` 映射; 平原 节点执行仍需要CSS-意识加载器,因为取取取器组件模块会导入CSS副作用.
-   常见JS `require('@antonlimar/react-color')` 财务报告和审定财务报表 `require('@antonlimar/react-color/lib/...')` 不再支持.

## 演示

![Demo](https://media.giphy.com/media/26FfggT53qE304CwE/giphy.gif)

[**现场直播**](https://antonlimar.github.io/react-color/)

## 安装和使用

```sh
npm install @antonlimar/react-color
```

### 包含组件

```js
import { SketchPicker } from '@antonlimar/react-color';

function Component() {
  return <SketchPicker />;
}
```

您可以导入 `AlphaPicker` `BlockPicker` `ChromePicker` `CirclePicker` `CompactPicker` `GithubPicker` `GooglePicker` `HuePicker` `MaterialPicker` `PhotoshopPicker` `SketchPicker` `SliderPicker` `SwatchesPicker` `TwitterPicker` 页:1.

### 样式

现代化的分叉船组件范围CSS 自动带有每个组件的切入点,而不是依赖内置的默认拾取器UI `reactcss` 样式.

取根和共享原始进口包括它们需要的CSS.

所有公众选手都接受 `className` 在根节点上,并仍然支持 `styles` 运行时间内线覆盖的道具 。 他们现在也支持 `theme`, (中文(简体) ), `classNames`,以及用于样式的 CSS 自定义属性;新定制更可取 `classNames`, CSS 变量,并发布 `rc-*` BEM钩可能时.

## 常见问题

### @antonlimar/react-color 是什么？

从 Sketch 、 Photoshop 、 Chrome 和 更多 收集取色器

### 如何安装 @antonlimar/react-color？

在项目目录运行 npm install @antonlimar/react-color，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @antonlimar/react-color 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @antonlimar/react-color 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @antonlimar/react-color 可以商用吗？

@antonlimar/react-color 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @antonlimar/react-color 的下载量有多少？

根据 npm 官方下载统计，@antonlimar/react-color 在 2026/10/06 – 2026/11/04 这 30 天内被下载 4,070 次，日均约 136 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @antonlimar/react-color 还在维护吗？

最新版本 3\.0\.10 发布于 2026/09/25（1 个月前）；至今共发布 5 个版本，其中过去 12 个月发布了 5 个；首次发布于 2026/05/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。