How to install and integrate emoji-picker-react in React

Emojis are an enhancement in modern-day digital communication that allows users to express emotions and ideas visually, making messages more engaging and universally understandable. Incorporating emoji support in modern web applications is not just a trend but a necessary feature that enhances user experience by providing expressive, engaging, and effective communication tools.

The emoji-picker-react library provides a fully managed, user-friendly emoji picker that we can easily integrate into our React applications. It’s a great addition to chat apps, forums, or any application based on the React framework that might benefit from emoji input.

Installation

To install the emoji-picker-react library, we simply need to execute the following command within the relevant React project directory:

The following terminal can help simulate how we can install the emoji-picker-react library. To do so, simply click the terminal to connect with it, and the terminal environment should open in a test-app directory that serves as a simulated React project where we can install emoji-picker-react.

After connecting to the terminal, execute the npm install emoji-picker-react command:

Upon the successful installation of the emoji-picker-react library, we should see a message similar to this:

Integration in React

To use emoji-picker-react, we first need to import the library into the relevant React component file:

Next, we must add the React emoji picker to our component function with the relevant props.

The most important prop for the React emoji picker is the onEmojiClick prop, which is of the function type and allows us to set up a callback function for when an emoji in the picker is clicked. The code snippet below displays how it's used with a callback function named onClickFunction.

Example todo list application

Now that we’ve seen how to integrate the emoji-picker-react library with a React application, let’s go over a working example todo list application utilizing the emoji picker. In this example, we’ve used the emoji picker with our todo list’s text editor, allowing us to add and save emojis in our todo items.

Code explanation

Let’s dive into the code and see how we’ve embedded the emoji-picker-react library into our React todo list application.

Note: For better understanding of the integration of the emoji-picker-react library, we’ve only gone over the relevant code related to the emoji-picker-react library.

• Line 3: In this line, we import the EmojiPicker component from the emoji-picker-react library, which is used to provide an emoji selection interface in the application.

• Line 16: In this line, we initialize a React state variable inputValue with an empty string. The inputValue holds the current value of the to-do input field, and setInputValue is the function used to update this value.

• Line 17: In this line, we initialize a React state variable showEmojiPicker with a default value of false. This state controls the visibility of the emoji picker component in the user interface.

• Lines 20–31: In this code block, we define the setEmoji function that inserts an emoji at the current cursor position within the input field. It updates the input text by slicing it around the cursor, adding the selected emoji in between, and then updating the component state to reflect this change. After inserting the emoji, it closes the emoji picker by setting its visibility state to false.

• Lines 33–35: In this code block, we define the setShowEmojiPicker function that updates the showEmojiPicker state to its opposite boolean value. This effectively shows or hides the emoji picker based on user interaction, such as clicking a button.

• Lines 37–39: In this code block, we define the handleInputChange function to listen for changes in the input field, capture the new value from the input element, and update the inputValue state with this new text using the setInputValue function. This keeps the textbox state synchronized with the user’s input.

• Line 52: In this line, we’ve defined the following:

  • EmojiPicker Component: It displays a grid of emojis from which users can choose.

  • onEmojiClick Prop: This prop is a function (setEmoji) assigned to handle the event when an emoji is clicked. When an emoji is selected, setEmoji is called, which inserts the emoji into the input field at the current cursor position and closes the picker.

To sum up, we’ve seen how to install and integrate the emoji-picker-react library within a React application, and an example todo list application where we’ve embedded an emoji picker.