# @charkour/react-reactions 中文文档 规范地址：https://npmcn.com/package/%40charkour/react-reactions/ 版本：0\.11\.0 npm 元数据更新时间：2022-08-16T01:00:12.343Z 中文译文更新时间：2026-11-09T10:50:41.570Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40charkour/react-reactions 原文对照：https://npmcn.com/package/%40charkour/react-reactions/?lang=original 项目主页：https://github.com/charkour/react-reactions 源码仓库：https://github.com/charkour/react-reactions ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1.4 MB，105 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - Node.js 要求：\>=10 - 运行依赖：0 个 - peer 依赖：react \>=16 - 首次发布：2021-01-22T19:30:10.864Z - 最新版本发布：2022-08-16T01:00:12.262Z - 近 30 天下载量：10038（2026-10-10 至 2026-11-08，npm 官方下载统计） - 已发布版本数：21（近 12 个月 0 个） ## 中文简介 \* 创建自定义反应拾取器和计数器或使用你最喜欢的! ## 安装 ```sh npm install @charkour/react-reactions ``` 也可以使用：`pnpm add @charkour/react-reactions`、`yarn add @charkour/react-reactions`、`bun add @charkour/react-reactions` ## README # ![react-reactions](https://npmcn.com/package/%40charkour/react-reactions/assets/react-reactions-media.png) 创建自己的反应栏或使用你最喜欢的一款! - **4 不同的选择器** - Slack,脸书,Pokemon和GitHub - **5个不同的计数器** - GitHub、YouTube、Facebook、Pokemon和斯克 [![Downloads](https://img.shields.io/npm/dt/@charkour/react-reactions.svg)](https://www.npmjs.com/package/@charkour/react-reactions) 安装 [通过 npm](https://www.npmjs.com/package/@charkour/react-reactions) (或来自 [GitHub 软件包注册](https://github.com/charkour/react-reactions/packages/623096): ```sh npm i @charkour/react-reactions ``` > 这个来源于 [个案和伯格/反应](https://github.com/casesandberg/react-reactions) 根据麻省理工学院的许可修改后,增加了一些功能. ## 新特性 - [x] 添加通过的能力 **自定义图标** - [x] 固定的安全弱点 - [x] CJS和无害环境管理支助 - [x] 添加 [转发](https://reactjs.org/docs/forwarding-refs.html) 支助 - [x] 零依赖关系 - [x] 以 Typescript 和 现代反应( 与 [信息技术事务司](https://github.com/formium/tsdx)(中文(简体) ) - [x] 与回放16.8+和下10合作 ## 路线图 - [ ] 更新当前选择器和计数器以匹配2021样式 - [ ] 添加 Discord 选择器和计数器 - [ ] 添加单位测试 - [ ] 还要吗? 建议在 [Github 问题](https://github.com/charkour/react-reactions/issues) ## 自定义选择器 ### 反应栏选择器 ```tsx import React from 'react'; import { ReactionBarSelector } from '@charkour/react-reactions'; const Component = () => { return ; }; ``` **道具 :** `iconSize?: number` ——字符串图标像素大小. 默认为 `38px` `reactions?: Reaction[];` 反应对象阵列 `{label: "haha", node:
😄
, key: "smile"}` 显示. `onSelect: (key: string) => void;` – 选择 emoji 时函数调用 `style?: React.CSSProperties` - 向选择器容器传递样式对象 ![image](https://user-images.githubusercontent.com/33156025/111041592-e1ece100-8406-11eb-82f5-226b3839683c.png) 也与影像相通. ![image](https://user-images.githubusercontent.com/33156025/111041788-00071100-8408-11eb-82a3-e23723e0755c.png) _说明_: 当通过一个 `` 作为反应。 指定 `iconSize` 作为图像的高度. `` ### 反应对策 ```tsx import React from 'react'; import { ReactionCounter } from '@charkour/react-reactions'; const Component = () => { return ; }; ``` **道具 :**\* 联合国 `iconSize?: number` - 字符串图标像素大小。 默认为 `24px` `bg?: string` - 为重叠反应提纲而用六分色的字符串。 默认为 `#fff` `reactions: ReactionCounterObject[]` - 乱七八糟的"爱莫吉" `user?: string` - 用户字符串名称,以便用户显示为 `You` `important?: string[]` - 用于重要用户显示姓名的串列 `showReactsOnly?: boolean` - 狦 `true`,只显示反应,没有文本。 默认为 `false` `showTotalOnly?: boolean` - 狦 `true`,只显示反应次数,没有具体名称。 默认为 `false` `showOthersAlways?: boolean` - 如果你是唯一反应的人 就会展示"和0其他人" 默认为 `true` `className?: string` - 通过适用于柜台容器的字符串 `onClick?: () => void` - 通过一个回调,这是添加在 `onClick` 与柜台容器有关的财产 `style?: React.CSSProperties` - 将样式对象传递到柜台容器 ![image](https://user-images.githubusercontent.com/33156025/135777827-803fac2d-d2c9-4734-8073-bd6e3a6d2160.png) ## 选择器 ### 黑选择器 ```tsx import React from 'react'; import { SlackSelector } from '@charkour/react-reactions'; const Component = () => { return ; }; ``` **道具 :** `active`: 活动标签的字符串。 默认为 `mine` `scrollHeight`:滚动容器的字符串像素高度. 默认为 `270px` `removeEmojis`: 要从 emoji 列表中删除的 emojis 序列 `frequent`: 常被使用的情绪组合。 默认为 `['👍', '🐉', '🙌', '🗿', '😊', '🐬', '😹', '👻', '🚀', '🚁', '🏇', '🇨🇦']` `onSelect`: 选择 emoji 时调用函数 * * * ### Github 选择器 ```tsx import React from 'react'; import { GithubSelector } from '@charkour/react-reactions'; const Component = () => { return ; }; ``` **道具 :** `reactions`: 排出爱莫吉分钱。 默认为 `['👍', '👎', '😄', '🎉', '😕', '❤️']` `onSelect`: 选择 emoji 时调用函数 * * * ### Facebook 选择器 ```tsx import React from 'react'; import { FacebookSelector } from '@charkour/react-reactions'; const Component = () => { return ; }; ``` **道具 :** `reactions`: 用于显示反应的串列。 默认为 `['like', 'love', 'haha', 'wow', 'sad', 'angry']` `iconSize`:字符串图标像素大小. 默认为 `38px` `onSelect`: 选择 emoji 时调用函数 * * * ### Pokemon 选择器 ```tsx import React from 'react'; import { PokemonSelector } from '@charkour/react-reactions'; const Component = () => { return ; }; ``` **道具 :** `reactions`: 用于显示反应的串列。 默认为 `['like', 'love', 'haha', 'wow', 'sad', 'angry']` `iconSize`:字符串图标像素大小. 默认为 `38px` `onSelect`: 选择 emoji 时调用函数 * * * ## 柜台 ### Github 计数器 ```tsx import React from 'react'; import { GithubCounter } from '@charkour/react-reactions'; const Component = () => { return ; }; ``` **道具 :** `counters`: 结构为: ```tsx { emoji: '👍', // String emoji reaction by: 'case', // String of persons name } ``` `user`: 用户字符串名称,使用户显示为 `You` `onSelect`: 选择 emoji 时调用函数 `onAdd`: 点击添加反应时调用函数 * * * ### Youtube 计数器 ```tsx import React from 'react'; import { YoutubeCounter } from '@charkour/react-reactions'; const Component = () => { return ; }; ``` **道具 :** `like`: 喜欢的字符串数 `dislike`: 不喜欢的字符串数 `onLikeClick`: 点击类似时调用函数 `onDislikeClick`: 不喜欢时调用函数 * * * ### Facebook 计数器 ```tsx import React from 'react'; import { FacebookCounter } from '@charkour/react-reactions'; const Component = () => { return ; }; ``` **道具 :** `counters`: 结构为: ```tsx { emoji: 'like', // String name of reaction by: 'Case Sandberg', // String of persons name } ``` `user`: 用户字符串名称,使用户显示为 `You` `important`: 用于重要用户显示名称的字符串阵列 `bg`: 为重叠反应提纲而设置的六分色字符串. 默认为 `#fff` `onClick`: 点击时函数调用 `alwaysShowOthers`:布尔. 如果你是唯一反应的人 就会展示"和0其他人". * * * ### Pokemon 计数器 ```tsx import React from 'react'; import { PokemonCounter } from '@charkour/react-reactions'; const Component = () => { return ; }; ``` **道具 :** `counters`: 结构为: ```tsx { emoji: 'like', // String name of reaction by: 'Charles Kornoelje', // String of persons name } ``` `user`: 用户字符串名称,使用户显示为 `You` `important`: 用于重要用户显示名称的字符串阵列 `bg`: 为重叠反应提纲而设置的六分色字符串. 默认为 `#fff` `onClick`: 点击时函数调用 `alwaysShowOthers`:布尔. 如果你是唯一反应的人 就会展示"和0其他人". * * * ### 黑计数器 ```tsx import React from 'react'; import { SlackCounter } from '@charkour/react-reactions'; const Component = () => { return ; }; ``` **道具 :** `counters`: 结构为: ```tsx { emoji: '🗿', // String emoji reaction by: 'case', // String of persons name } ``` `user`: 用户字符串名称,使用户显示为 `You` `onSelect`: 选择 emoji 时调用函数 `onAdd`: 点击添加反应时调用函数 * * * ## 动画 在使用CSS的组件上可以做一个简单的动画. 看这个 [演示](https://codesandbox.io/s/sweet-burnell-oh5vg?file=/src/App.js)。 。 。 . 使用动态风格可以做出更多的取材动画. 看这个 [演示](https://codesandbox.io/s/competent-curran-cn4tv?file=/src/App.js) ## 发展 ```bash npm start ``` 此处为 `/dist` 并按监视模式运行此工程, 这样任何您在内部保存的编辑 `src` 导致重建 `/dist`。 。 。 . 然后运行故事本或游戏场: ### 故事书 在另一个终端内运行 : ```bash npm run storybook ``` 将故事从 `./stories`。 。 。 . > 注:故事应参照使用库的组件,类似于游乐场的例子。 这意味着从根项目目录导入. 这在tsconfig和故事书的webpackconfig中被别名为帮助者. ### 示例 然后在另一个例子中运行: ```bash cd example npm i npm start ``` 默认示例导入和实时重载任意内容 `/dist`,所以如果你看到一个过时组件,请确保TSDX像我们上文建议的那样以监视模式运行. **不需要连锁**,我们使用 [帕塞尔的化名](https://parceljs.org/module_resolution.html#aliases)。 。 。 . 做一次性建设,使用 `npm run build`。 。 。 . 运行测试,使用 `npm test`。 。 。 . ## 配置 代码质量为您设定 `prettier`, (中文(简体) ), `husky`,以及 `lint-staged`。调整各个字段 `package.json` 相应. ### 欢乐 进行测试 `npm test`。 。 。 . ### GitHub 动作 - `main` 用于安装 Deps w/ 缓存、 lints 、 测试, 并基于所有针对节点和 OS 矩阵的推力 * * * > Pokemon图解 [克里斯·欧文斯](https://dribbble.com/monkee1895) ## 常见问题 ### @charkour/react-reactions 是什么？ \* 创建自定义反应拾取器和计数器或使用你最喜欢的\! ### 如何安装 @charkour/react-reactions？ 在项目目录运行 npm install @charkour/react-reactions，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @charkour/react-reactions 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @charkour/react-reactions 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @charkour/react-reactions 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=10。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @charkour/react-reactions 可以商用吗？ @charkour/react-reactions 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @charkour/react-reactions 的下载量有多少？ 根据 npm 官方下载统计，@charkour/react-reactions 在 2026/10/10 – 2026/11/08 这 30 天内被下载 10,038 次，日均约 335 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @charkour/react-reactions 还在维护吗？ 最新版本 0\.11\.0 发布于 2022/08/16（4 年前）；至今共发布 21 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/01/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。