Expressive UIs: Integrate Emojis Seamlessly with Reactions Library

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

1. Install reactions.
2. Import reactions in your React project.
3. 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.