In the digital realm, emotions transcend through emojis, making conversations lively and expressive. For developers employing React for their projects, integrating emojis becomes a breeze with the open-source library, Reactions. This robust library not only offers a rich set of emojis including smileys, sad faces, and hearts but also extends support for custom emojis and localizations, making your React application engaging and globally friendly.
Let's walk through some examples demonstrating the versatility of Reactions:
Simple Usage
import { useReactions } from "reactions";
const App = () => {
const reactions = useReactions();
return (
<div>
<h1>Hello, world!</h1>
<p>
{reactions.render("smile")}
{reactions.render("sad")}
{reactions.render("love")}
</p>
</div>
);
};
Custom Emojis
import { useReactions } from "reactions";
const App = () => {
const reactions = useReactions({
my_custom_emoji: {
svg: () => (
<svg viewBox="0 0 24 24">
<path d="M12 22c1.1 0 2-.9 2-2s-.9-2-2-2c-1.1 0-2 .9-2 2s.9 2 2 2zm0-2c-1.1 0-2-.9-2-2s.9-2 2-2c1.1 0 2 .9 2 2s-.9 2-2 2zm0-2c-1.1 0-2-.9-2-2s.9-2 2-2c1.1 0 2 .9 2 2s-.9 2-2 2z" />
</svg>
),
},
});
return (
<div>
<h1>Hello, world!</h1>
<p>
{reactions.render("smile")}
{reactions.render("sad")}
{reactions.render("love")}
{reactions.render("my_custom_emoji")}
</p>
</div>
);
};
Emoji Localization
import { useReactions } from "reactions";
const App = () => {
const reactions = useReactions({
my_custom_emoji: {
svg: () => (
<svg viewBox="0 0 24 24">
<path d="M12 22c1.1 0 2-.9 2-2s-.9-2-2-2c-1.1 0-2 .9-2 2s.9 2 2 2zm0-2c-1.1 0-2-.9-2-2s.9-2 2-2c1.1 0 2 .9 2 2s-.9 2-2 2zm0-2c-1.1 0-2-.9-2-2s.9-2 2-2c1.1 0 2 .9 2 2s-.9 2-2 2z" />
</svg>
),
label: {
en: "My custom emoji",
zh: "我的自定义表情包",
},
},
});
return (
<div>
<h1>Hello, world!</h1>
<p>
{reactions.render("smile")}
{reactions.render("sad")}
{reactions.render("love")}
{reactions.render("my_custom_emoji")}
</p>
</div>
);
};
Getting Started
- Install
reactions
. - Import
reactions
in your React project. - Utilize
useReactions
hook to leverage the library.
Additional Information
- Reactions is built using robust technologies ensuring smooth integration.
- It can be easily installed and imported in your React project.
In summary, Reactions is a powerful library for React, aimed at effortlessly integrating a wide range of emojis, including custom and localized ones, enhancing the expressiveness and global appeal of your application.