创建自己的反应栏或使用你最喜欢的一款!
- 4 不同的选择器 - Slack,脸书,Pokemon和GitHub
- 5个不同的计数器 - GitHub、YouTube、Facebook、Pokemon和斯克
安装 通过 npm (或来自 GitHub 软件包注册:
npm i @charkour/react-reactions
这个来源于 个案和伯格/反应 根据麻省理工学院的许可修改后,增加了一些功能.
新特性
- 添加通过的能力 自定义图标
- 固定的安全弱点
- CJS和无害环境管理支助
- 添加 转发 支助
- 零依赖关系
- 以 Typescript 和 现代反应( 与 信息技术事务司(中文(简体) )
- 与回放16.8+和下10合作
路线图
- 更新当前选择器和计数器以匹配2021样式
- 添加 Discord 选择器和计数器
- 添加单位测试
- 还要吗? 建议在 Github 问题
自定义选择器
反应栏选择器
import React from 'react';
import { ReactionBarSelector } from '@charkour/react-reactions';
const Component = () => {
return <ReactionBarSelector />;
};
道具 :
iconSize?: number ——字符串图标像素大小. 默认为 38px
reactions?: Reaction[]; 反应对象阵列 {label: "haha", node: <div>😄</div>, key: "smile"} 显示.
onSelect: (key: string) => void; – 选择 emoji 时函数调用
style?: React.CSSProperties - 向选择器容器传递样式对象
也与影像相通.
说明: 当通过一个 <img> 作为反应。 指定 iconSize 作为图像的高度. <img height={iconSize} src="img-source" />
反应对策
import React from 'react';
import { ReactionCounter } from '@charkour/react-reactions';
const Component = () => {
return <ReactionCounter />;
};
道具 :* 联合国
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 - 将样式对象传递到柜台容器
选择器
黑选择器
import React from 'react';
import { SlackSelector } from '@charkour/react-reactions';
const Component = () => {
return <SlackSelector />;
};
道具 :
active: 活动标签的字符串。 默认为 mine
scrollHeight:滚动容器的字符串像素高度. 默认为 270px
removeEmojis: 要从 emoji 列表中删除的 emojis 序列
frequent: 常被使用的情绪组合。 默认为 ['👍', '🐉', '🙌', '🗿', '😊', '🐬', '😹', '👻', '🚀', '🚁', '🏇', '🇨🇦']
onSelect: 选择 emoji 时调用函数
Github 选择器
import React from 'react';
import { GithubSelector } from '@charkour/react-reactions';
const Component = () => {
return <GithubSelector />;
};
道具 :
reactions: 排出爱莫吉分钱。 默认为 ['👍', '👎', '😄', '🎉', '😕', '❤️']
onSelect: 选择 emoji 时调用函数
Facebook 选择器
import React from 'react';
import { FacebookSelector } from '@charkour/react-reactions';
const Component = () => {
return <FacebookSelector />;
};
道具 :
reactions: 用于显示反应的串列。 默认为 ['like', 'love', 'haha', 'wow', 'sad', 'angry']
iconSize:字符串图标像素大小. 默认为 38px
onSelect: 选择 emoji 时调用函数
Pokemon 选择器
import React from 'react';
import { PokemonSelector } from '@charkour/react-reactions';
const Component = () => {
return <PokemonSelector />;
};
道具 :
reactions: 用于显示反应的串列。 默认为 ['like', 'love', 'haha', 'wow', 'sad', 'angry']
iconSize:字符串图标像素大小. 默认为 38px
onSelect: 选择 emoji 时调用函数
柜台
Github 计数器
import React from 'react';
import { GithubCounter } from '@charkour/react-reactions';
const Component = () => {
return <GithubCounter />;
};
道具 :
counters: 结构为:
{
emoji: '👍', // String emoji reaction
by: 'case', // String of persons name
}
user: 用户字符串名称,使用户显示为 You
onSelect: 选择 emoji 时调用函数
onAdd: 点击添加反应时调用函数
Youtube 计数器
import React from 'react';
import { YoutubeCounter } from '@charkour/react-reactions';
const Component = () => {
return <YoutubeCounter />;
};
道具 :
like: 喜欢的字符串数
dislike: 不喜欢的字符串数
onLikeClick: 点击类似时调用函数
onDislikeClick: 不喜欢时调用函数
Facebook 计数器
import React from 'react';
import { FacebookCounter } from '@charkour/react-reactions';
const Component = () => {
return <FacebookCounter />;
};
道具 :
counters: 结构为:
{
emoji: 'like', // String name of reaction
by: 'Case Sandberg', // String of persons name
}
user: 用户字符串名称,使用户显示为 You
important: 用于重要用户显示名称的字符串阵列
bg: 为重叠反应提纲而设置的六分色字符串. 默认为 #fff
onClick: 点击时函数调用
alwaysShowOthers:布尔. 如果你是唯一反应的人 就会展示"和0其他人".
Pokemon 计数器
import React from 'react';
import { PokemonCounter } from '@charkour/react-reactions';
const Component = () => {
return <PokemonCounter />;
};
道具 :
counters: 结构为:
{
emoji: 'like', // String name of reaction
by: 'Charles Kornoelje', // String of persons name
}
user: 用户字符串名称,使用户显示为 You
important: 用于重要用户显示名称的字符串阵列
bg: 为重叠反应提纲而设置的六分色字符串. 默认为 #fff
onClick: 点击时函数调用
alwaysShowOthers:布尔. 如果你是唯一反应的人 就会展示"和0其他人".
黑计数器
import React from 'react';
import { SlackCounter } from '@charkour/react-reactions';
const Component = () => {
return <SlackCounter />;
};
道具 :
counters: 结构为:
{
emoji: '🗿', // String emoji reaction
by: 'case', // String of persons name
}
user: 用户字符串名称,使用户显示为 You
onSelect: 选择 emoji 时调用函数
onAdd: 点击添加反应时调用函数
动画
在使用CSS的组件上可以做一个简单的动画. 看这个 演示。 。 。 . 使用动态风格可以做出更多的取材动画. 看这个 演示
发展
npm start
此处为 /dist 并按监视模式运行此工程, 这样任何您在内部保存的编辑 src 导致重建 /dist。 。 。 .
然后运行故事本或游戏场:
故事书
在另一个终端内运行 :
npm run storybook
将故事从 ./stories。 。 。 .
注:故事应参照使用库的组件,类似于游乐场的例子。 这意味着从根项目目录导入. 这在tsconfig和故事书的webpackconfig中被别名为帮助者.
示例
然后在另一个例子中运行:
cd example
npm i
npm start
默认示例导入和实时重载任意内容 /dist,所以如果你看到一个过时组件,请确保TSDX像我们上文建议的那样以监视模式运行. 不需要连锁,我们使用 帕塞尔的化名。 。 。 .
做一次性建设,使用 npm run build。 。 。 .
运行测试,使用 npm test。 。 。 .
配置
代码质量为您设定 prettier, (中文(简体) ), husky,以及 lint-staged。调整各个字段 package.json 相应.
欢乐
进行测试 npm test。 。 。 .
GitHub 动作
main用于安装 Deps w/ 缓存、 lints 、 测试, 并基于所有针对节点和 OS 矩阵的推力
Pokemon图解 克里斯·欧文斯