[Feature] customize reactions with gif/png/ico files

[c0ncentus]

hi, thanks to continue the job, make react-reactions great again :) !

[charkour]

Hey @c0ncentus,

Which selector or counter are you hoping to customize? I plan to make the Facebook selector and counter customizable (after I finish porting it to Typescript. Currently about halfway done). Thanks for reaching out.

[c0ncentus]

Facebook Selector is the most I think 👍 . this will be awesome with GightubCounter et GithubSelector. Thanks for planning to support this awesome package.

awesome script + awesome feature = awesome UI and awesome package ❤️ .

[charkour]

Sounds good! I'm almost done with the Typescript port and then I'll plan on adding custom support for the Facebook Selector and Counter first.

Thanks for your excitement!

[crieggalder]

@charkour glad to see this package getting revived! Thank you for your work on this. :)

[charkour]

@c0ncentus, I'm trying to design a way to add custom images to the selectors. I think creating a custom selector component would be best.

Do you have suggestions on how to implement it?

Sorry this feature is taking a long time.

[charkour]

@c0ncentus, check out PR #62.

This add's the ability to use custom reactions on the reaction bar

Also works with images.

Useage:

Reaction Bar Selector

import React from 'react';
import { ReactionBarSelector } from '@charkour/react-reactions';

const Component = () => {
  return <ReactionBarSelector />;
};

Props:

iconSize?: number — String icon pixel size. Defaults to 38px reactions?: Reaction[]; — Array of Reaction objects {label: "haha", node: <div>😄</div>} to display. onSelect: (label: string) => void; — Function callback when emoji is selected

Note: When passing an <img> as a Reaction. Specify the iconSize as the height of the image. <img height={iconSize} src="img-source" />

[charkour]

This feature is live on 0.5.0. Let me know what you think and I'll work on adding more custom components.

[charkour]

118 adds the custom reaction counter. It is released in v0.6.0. Thanks to @justemoilouise!