Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

How to create Emoji Picker in NextJS ?

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

In this article, we are going to learn how we can add Emoji Picker in NextJS. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac.

Approach: To add our Emoji Picker, 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.

Create NextJS Application: You can create a new NextJs project using the below command:

npx create-next-app gfg


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

npm i react-input-emoji

Project Structure: It will look like this.

Adding the Emoji Picker: We can easily add the emoji picker in our app after installing the react-input-emoji package. For this example, we are going to add the emoji picker to our homepage.


import React, { useState } from "react";
import InputEmoji from "react-input-emoji";
export default function EmojiInput() {
  const [text, setText] = useState("");
  return (
    <h4>NextJs EmojiPicker - GeeksforGeeks</h4>
      placeholder="Type a message"

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


My Personal Notes arrow_drop_up
Last Updated : 02 Feb, 2023
Like Article
Save Article
Similar Reads
Related Tutorials