How to create Emoji Picker in ReactJS ?

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:

• NPM & Node.js
• React JS

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.

// 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>
    );
}

Steps to run the application: Run the below command in the terminal to run the app.

npm start

Output: This output will be visible on the http://localhost:3000/ on the browser window.