How to create Emoji Picker in NextJS ?

Adding an emoji picker to your Next.js app makes it easy for users to express themselves with emojis. By integrating a simple and intuitive emoji picker, you can enhance user interactions and make your app more engaging and fun. In this article, we are going to learn how we can add Emoji Picker in NextJS.

Approach

To add the Emoji Picker in next.js, we are going to use the react-input-emoji package. The react-input-emoji package helps us to add emoji pickers anywhere in our app. So first, we will install the react-input-emoji package and then we will add the Emoji Picker on our homepage.

Steps to Create Next.js App and Install Required Modules

Step 1: You can create a new NextJs project using the below command:

npx create-next-app gfg

Step 2: Move to the project directory

cd gfg

Step 3: Install the required package

Now we will install the react-input-emoji package using the below command:

npm i react-input-emoji

Project Structure:

The updated dependencies in the package.json file are:

"dependencies": {
    "next": "14.2.4",
    "react": "^18",
    "react-dom": "^18",
    "react-input-emoji": "^5.9.0",
}

Example: This example demonstrates adding emoji picker to the next.js application with the help of react-input-emoji package from NPM.

// Filename - index.js;

import React, { useState } from "react";
import InputEmoji from "react-input-emoji";

export default function EmojiInput() {
    const [text, setText] = useState("");

    return (
        <div>
            <h4>
            	NextJs EmojiPicker - GeeksforGeeks
			</h4>
            <br />
            <br />
            <br />
            <br />
            <InputEmoji 
            	value={text} 
                onChange={setText} 
                cleanOnEnter 
                placeholder="Type a message" />
        </div>
    );
}

Explanation: In the above example first, we are importing the InputEmoji component from the installed package. After that, we are adding our Emoji Picker using the installed package.

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

npm run dev

Output: