😲 Create custom reaction pickers and counters or use your favorites!
npm install @charkour/react-reactionsCreate your own reaction bar or use one of your favorites!
- 4 Different Selectors - Slack, Facebook, Pokemon and GitHub
- 5 Different Counters - GitHub, YouTube, Facebook, Pokemon, and Slack

Install via npm (or from the GitHub Package Registry):
``sh`
npm i @charkour/react-reactions
> This originated as a fork of casesandberg/react-reactions which is been modified under the MIT license to include additional features.
- [x] Add ability to pass custom icons
- [x] Fixed security vulnerabilities
- [x] CJS and ESM support
- [x] Add ref forwarding support
- [x] Zero dependencies
- [x] Built in Typescript and modern React (with TSDX)
- [x] Works with React 16.8+ and Next 10
- [ ] Update current Selectors and Counter to match 2021 styles
- [ ] Add Discord Selector and Counter
- [ ] Add unit testing
- [ ] More??? Suggest a feature on Github Issues
`tsx
import React from 'react';
import { ReactionBarSelector } from '@charkour/react-reactions';
const Component = () => {
return
};
`
Props:
iconSize?: number — String icon pixel size. Defaults to 38px
reactions?: Reaction[]; — Array of Reaction objects {label: "haha", node:
to display.onSelect: (key: string) => void; — Function callback when emoji is selectedstyle?: React.CSSProperties - Pass a style object to the selector containerAlso works with images.
_Note_: When passing an
as a Reaction. Specify the iconSize as the height of the image. $3
`tsx
import React from 'react';
import { ReactionCounter } from '@charkour/react-reactions';const Component = () => {
return ;
};
`Props:*
iconSize?: number - String icon pixel size. Defaults to 24pxbg?: string - String of hex color for outline of overlapping reactions. Defaults to #fffreactions: ReactionCounterObject[] - Array of emoji to dispayuser?: string - String name of user so that user displays as Youimportant?: string[] - Array of strings for important users to display their nameshowReactsOnly?: boolean - If true, only show the Reactions and no text. Defaults to falseshowTotalOnly?: boolean - If true, only show the number of Reactions and no specific names. Defaults to falseshowOthersAlways?: boolean - Will display "and 0 others" if you are the only person who reacted. Defaults to trueclassName?: string - Pass a string that applies to the counter containeronClick?: () => void - Pass a callback that is added to the onClick property to the counter containerstyle?: React.CSSProperties - Pass a style object to the counter containerSelectors
$3
`tsx
import React from 'react';
import { SlackSelector } from '@charkour/react-reactions';const Component = () => {
return ;
};
`Props:
active: String of active tab. Defaults to minescrollHeight: String pixel height of scroll container. Defaults to 270pxremoveEmojis: Array of emojis to remove from emoji listfrequent: Array of emojis to set Frequently Used. Defaults to ['👍', '🐉', '🙌', '🗿', '😊', '🐬', '😹', '👻', '🚀', '🚁', '🏇', '🇨🇦']onSelect: Function callback when emoji is selected---
$3
`tsx
import React from 'react';
import { GithubSelector } from '@charkour/react-reactions';const Component = () => {
return ;
};
`Props:
reactions: Array of emoji to dispay. Defaults to ['👍', '👎', '😄', '🎉', '😕', '❤️']onSelect: Function callback when emoji is selected---
$3
`tsx
import React from 'react';
import { FacebookSelector } from '@charkour/react-reactions';const Component = () => {
return ;
};
`Props:
reactions: Array of strings for reactions to display. Defaults to ['like', 'love', 'haha', 'wow', 'sad', 'angry']iconSize: String icon pixel size. Defaults to 38pxonSelect: Function callback when emoji is selected---
$3
`tsx
import React from 'react';
import { PokemonSelector } from '@charkour/react-reactions';const Component = () => {
return ;
};
`Props:
reactions: Array of strings for reactions to display. Defaults to ['like', 'love', 'haha', 'wow', 'sad', 'angry']iconSize: String icon pixel size. Defaults to 38pxonSelect: Function callback when emoji is selected---
Counters
$3
`tsx
import React from 'react';
import { GithubCounter } from '@charkour/react-reactions';const Component = () => {
return ;
};
`Props:
counters: Array of counter objects structured such that:`tsx
{
emoji: '👍', // String emoji reaction
by: 'case', // String of persons name
}
`user: String name of user so that user displays as YouonSelect: Function callback when emoji is selectedonAdd: Function callback when add reaction is clicked---
$3
`tsx
import React from 'react';
import { YoutubeCounter } from '@charkour/react-reactions';const Component = () => {
return ;
};
`Props:
like: String number of likesdislike: String number of dislikesonLikeClick: Function callback when like is clickedonDislikeClick: Function callback when dislike is clicked---
$3
`tsx
import React from 'react';
import { FacebookCounter } from '@charkour/react-reactions';const Component = () => {
return ;
};
`Props:
counters: Array of counter objects structured such that:`tsx
{
emoji: 'like', // String name of reaction
by: 'Case Sandberg', // String of persons name
}
`user: String name of user so that user displays as Youimportant: Array of strings for important users to display their namebg: String of hex color for outline of overlapping reactions. Defaults to #fffonClick: Function callback when clickedalwaysShowOthers: boolean. Will display "and 0 others" if you are the only person who reacted.---
$3
`tsx
import React from 'react';
import { PokemonCounter } from '@charkour/react-reactions';const Component = () => {
return ;
};
`Props:
counters: Array of counter objects structured such that:`tsx
{
emoji: 'like', // String name of reaction
by: 'Charles Kornoelje', // String of persons name
}
`user: String name of user so that user displays as Youimportant: Array of strings for important users to display their namebg: String of hex color for outline of overlapping reactions. Defaults to #fffonClick: Function callback when clickedalwaysShowOthers: boolean. Will display "and 0 others" if you are the only person who reacted.---
$3
`tsx
import React from 'react';
import { SlackCounter } from '@charkour/react-reactions';const Component = () => {
return ;
};
`Props:
counters: Array of counter objects structured such that:`tsx
{
emoji: '🗿', // String emoji reaction
by: 'case', // String of persons name
}
`user: String name of user so that user displays as YouonSelect: Function callback when emoji is selectedonAdd: Function callback when add reaction is clicked---
Animations
A simple animation can be done on the components using CSS. See this demo.
More advaned animations can be done using dynamic styles. See this demo
Development
`bash
npm start
`This builds to
/dist and runs the project in watch mode so any edits you save inside src causes a rebuild to /dist.Then run either Storybook or the example playground:
$3
Run inside another terminal:
`bash
npm run storybook
`This loads the stories from
./stories.> NOTE: Stories should reference the components as if using the library, similar to the example playground. This means importing from the root project directory. This has been aliased in the tsconfig and the storybook webpack config as a helper.
$3
Then run the example inside another:
`bash
cd example
npm i
npm start
`The default example imports and live reloads whatever is in
/dist, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. No symlinking required, we use Parcel's aliasing.To do a one-off build, use
npm run build.To run tests, use
npm test.Configuration
Code quality is set up for you with
prettier, husky, and lint-staged. Adjust the respective fields in package.json accordingly.$3
Jest tests are set up to run with
npm test.$3
-
main` which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix---
> Pokemon Illustrations by Chris Owens