How to create Emoji Picker in ReactJS ?

Last Updated : 10 Nov, 2023

Emojis have become an essential part of modern communication, adding a touch of emotion and fun to our messages and applications. In this article, we will explore how to create an Emoji Picker using ReactJS, allowing users to easily select and insert emojis into their text inputs or text areas.

Prerequisites:

Approach:

To create our Spreadsheet we are going to use the emoji-picker-react package because it is powerful, lightweight, and fully customizable. After that, we will add an emoji picker on our homepage using the installed package.

Steps to Create React Application:

Step 1: Create a new ReactJs project using the below command:

npx create-react-app gfg

Step 2: Move to the project directory.

cd gfg

Step 3: Install the emoji-picker-react package using the below command:

npm i emoji-picker-react

Project Structure:

The updated dependencies in package.json file will look like.

"dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "emoji-picker-react": "^4.5.15",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4
}

Example: This example uses Picker component from emoji-picker-react module to implement the emojipicker and display emoji on the page.

Javascript

// Filename - App.js
 
import React, { useState } from "react";
import Picker from "emoji-picker-react";
 
export default function Emoji() {
    const [chosenEmoji, setChosenEmoji] = useState(null);
 
    const onEmojiClick = (event, emojiObject) => {
        setChosenEmoji(emojiObject);
        console.log(emojiObject.target);
    };
 
    return (
        <div>
            <h3>GeeksforGeeks Emoji Picker</h3>
            {chosenEmoji ? (
                <span>
                    Your Emoji:
                    <img
                        style={{ width: "15px" }}
                        src={chosenEmoji.target.src}
                    />
                </span>
            ) : (
                <span>No Emoji</span>
            )}
            <Picker onEmojiClick={onEmojiClick} />
        </div>
    );
}