How to Add Emoji in React

1. Using Emoji in React
2. Use the Emoji Dictionary to Add Emojis in React
3. Use the emoji-regex to Add Emojis in React

We will introduce a few libraries that can add emojis in React applications.

Using Emoji in React

Emojis are text side images that express different emotions. Emojis were mainly introduced in communications, whether person to person or person to the group.

Emojis can be used in communications between brands, but the types of emojis are different.

This tutorial will introduce a few libraries that can integrate emojis in our React applications and make them more entertaining.

Use the Emoji Dictionary to Add Emojis in React

The emoji-dictionary is a library that can integrate emojis into our React applications. The good thing about this library is that it provides both getUnicode and getName.

We can convert emojis into the name of the emoji, or we can get emojis by just writing the name of the emojis.

So let’s install it and understand how we can integrate it. First, we will create a new application and style it by importing a stylesheet.

Let’s create a new application by using the following command.

# react
npx create-react-app my-app

After creating the new React application, we will go to the application directory using this command.

# react
cd my-app

Let’s run our app to check if all dependencies are installed correctly.

# react
npm start

Using npm, we will install the emoji-dictionary library using the following command.

# react
npm install --save emoji-dictionary

Once we have installed this library, we can use it in our React application by importing it into the file we need. So, we will import a variable emoji from an emoji-dictionary.

# react
import emoji from "emoji-dictionary";

Let’s create an emoji of the watch using getUnicode and display it.

# react
import "./styles.css";
import emoji from "emoji-dictionary";

export default function App() {
  const watch = emoji.getUnicode("watch");
  return (
    <div className="App">
      <h1>This is {watch}</h1>
    </div>
  );
}

Output:

We can also create a function that can easily convert our emojis from names to emoticons. And we can directly use emojis in the template.

So we will create a function convertEmoji(em) that will take an argument, converts it into an emoji, and returns it.

# react
function convertEmoji(em) {
    return emoji.getUnicode(em);
  }

Once we have created a function, we can use it to display a list with emojis in our template.

# react
<div className="App">
      <h1>Today's Menu</h1>
      <ul>
        <li>{convertEmoji("pizza")} Pizza</li>
        <li>{convertEmoji("sandwich")} Sandwich</li>
        <li>{convertEmoji("coffee")} Coffee</li>
        <li>{convertEmoji("tea")} Tea</li>
      </ul>
    </div>

Output:

As shown above, we can easily use emojis in our React application by importing a library and creating a simple function that will convert names to emojis easily.

Use the emoji-regex to Add Emojis in React

In the next example, we will discuss another library, emoji-regex. It is also a good library that can help us integrate emojis into our React application.

The best thing about this library is that we can use it directly in templates using Unicode. So let’s create a new application in React, implement this library and understand how it works.

So let’s create a new React application by using the following command.

# react
npx create-react-app my-app

After creating our new application in React, we will go to our application directory using this command.

# react
cd my-app

Let’s run our app to check if all dependencies are installed correctly.

# react
npm start

Install the emoji-regex library using the npm command.

# react
npm install emoji-regex

Now, we will import this library into any file where we need it.

# react
import "emoji-regex";

Let’s integrate emojis using this library and create the same example as the previous one. So we will define constants for all of the emojis we used in the previous example.

# react
const pizza = "\u{1F355}";
const Sandwich = "\u{1F96A}";
const coffee = "\u{2615}";
const tea = "\u{1F375}";

We will use these constants in the template to display.

# react
<div className="App">
      <h1>Today's Menu</h1>
      <ul>
        <li>{pizza} Pizza</li>
        <li>{Sandwich} Sandwich</li>
        <li>{coffee} Coffee</li>
        <li>{tea} Tea</li>
      </ul>
    </div>

Output:

It is quite easy to use emojis in React applications using the library. We can also use the Fontawesome library for emojis in React applications.