How to create Emoji Picker in NextJS?

Emojis have become an essential part of modern communication. In this tutorial, we will learn how to create an emoji picker in NextJS, a popular React-based framework for building server-rendered applications

An emoji picker is a UI component that displays a collection of emojis and allows users to select one or more emojis for use in their text. A well-designed emoji picker can improve the user experience and increase engagement on your site. In this tutorial, we will create an emoji picker that displays a grid of emojis and updates the selected emoji in the state.

Steps to create an emoji picker in NextJS

Users can follow the steps below to create an emoji picker in NextJS

Gather emoji data

Users can find a list of emojis and their respective codes on websites like Emoji Cheat Sheet. We can also use an emoji library, such as emojilib, that provides a list of emojis and their metadata. Store the emoji data in a variable or a file in your NextJS project.

Create the UI component

In our NextJS project, create a new component that will display the emoji picker. We can use an emoji library, such as emoji-mart, to display the emojis in a grid or list.

Pass the emoji data to the component

Pass the emoji data to the component as a prop and render the emojis.

Add an event handler

Add an event handler to the component that updates the state when a user selects an emoji. Users can do this by using the setState method in React.

Use the selected emoji

Use the selected emoji in your application. For example, you can display the selected emoji in the state or pass it to another component as a prop.

Example

This example demonstrates how to create an emoji picker using an array of emojis without any libraries.

We create a state selectedEmoji to store the selected emoji and a function setSelectedEmoji to update the selected emoji.

We create a function handleEmojiClick to handle the click of an emoji and update the selected emoji.

We create an array of emojis with their names, unicode, and codes.

We render the emoji picker, which includes −

• Displaying the selected emoji.

• Rendering a list of emojis, where each emoji is represented by a span element and has an onClick handler that calls the handleEmojiClick function and passes in the unicode of the emoji.

The resulting emoji picker will display the selected emoji and a list of emojis that can be clicked to select an emoji.

import React, { useState } from 'react';
import './EmojiPicker.css'

// Step 1: Create a state for the selected emoji
const EmojiPicker = () => {
   const [selectedEmoji, setSelectedEmoji] = useState(null);

   // Step 2: Create a function to handle the click of an emoji
   const handleEmojiClick = emoji => {
      setSelectedEmoji(emoji);
   };

   // Step 3: Create an array of emojis with their names, unicode, and codes
   const emojis = [
      { name: "smiling face with heart-eyes", unicode: "😍", code: ":heart_eyes:" },
      { name: "grinning face", unicode: "😀", code: ":grinning:" },
      { name: "winking face", unicode: "😉", code: ":wink:" },
      { name: "smiling face", unicode: "😊", code: ":smile:" },
      { name: "slightly smiling face", unicode: "🙂", code: ":slightly_smiling_face:" },
      { name: "kissing face", unicode: "😗", code: ":kissing_face:" }
   ];

   // Step 4: Render the emoji picker
   return (
      <div className="emoji-picker" id='emoji-picker'>
         {/* Step 4a: Display the selected emoji */}
            <div className="selected-emoji">
               {selectedEmoji}
            </div>
            {/* Step 4b: Render a list of emojis */}
            <div className="emoji-list"> 
               {Object.keys(emojis).map(emoji => (
               <span
                  key={emoji}
                  onClick={() =>
                  handleEmojiClick(emojis[emoji].unicode)}
                  className="emoji-item" >
                  {emojis[emoji].unicode}
               </span>
            ))}
         </div>
      </div>
   );
};

export default EmojiPicker;

EmojiPicker.css

.emoji-picker {
   display: flex;
   flex-direction: column;
   align-items: center;
   height:100vh;
}
.selected-emoji {
   font-size: 5rem;
}
.emoji-list {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   background-color: #f2f2f2;
   padding: 16px;
   font-size: 3rem;
   margin-top: 1rem;
}
.emoji-item {
   padding: 8px;
   cursor: pointer;
}

Output

Example

In the example below, we have created an emoji picker using NextJS and the emojilib library.

Step 1 − At first, we need to set up a new NextJS project using the command

npx create-next-app

and navigate into the project directory.

Step 2 − Create a file named EmojiPicker.js in the pages directory and add the following code to import React and the emojilib library:

import React, { useState } from 'react'
import emojiData from 'emojilib' 

Step 3 − Create a state to keep track of the selected emoji using useState −

const [selectedEmoji, setSelectedEmoji] = useState(null) 

Step 4 − Create a function to handle when an emoji is clicked. This function updates the selected emoji state −

const handleEmojiClick = emoji => {
   setSelectedEmoji(emoji)
}

Step 5 − Create the EmojiPicker component that displays the selected emoji and a list of emojis −

import React, { useState } from 'react'
import emojiData from 'emojilib'
import './EmojiPicker.css' 
const EmojiPicker = () => {
   
   // State to keep track of the selected emoji
   const [selectedEmoji, setSelectedEmoji] = useState(null)

   // Function to handle when an emoji is clicked
   const handleEmojiClick = emoji => {
      setSelectedEmoji(emoji)
   }
   return (
      <div className="emoji-picker">
         {/* Display the selected emoji */}
         <div className="selected-emoji">
            {selectedEmoji}
         </div>
         {/* Display the list of emojis */}
         <div className="emoji-list">
            {Object.keys(emojiData).map(emoji => (
               <span
                  key={emoji}
                  onClick={() => handleEmojiClick(emoji)}
                  className="emoji-item"
               >
                  {emoji}
               </span>
            ))}
         </div>
      </div>
   )
}
export default EmojiPicker 

Step 6 −  Add styles for the emoji picker using a CSS file. Users can use the following styles as a starting point −

.emoji-picker {
   display: flex;
   flex-direction: column;
   align-items: center;
}
.selected-emoji {
   font-size: 36px;
   font-family: sans-serif;
   background-color: #f2f2f2; 
   padding: 16px;
   border-radius: 50%;
   margin: 1rem 0;
}
.emoji-list {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   background-color: #f2f2f2;
   padding: 16px;
}
.emoji-item {
   font-size: 24px;
   font-family: sans-serif;
   padding: 8px;
   cursor: pointer;
}

Output

In this tutorial, we learned how to create an emoji picker in NextJS using RIn this tutorial, we learned how to create an emoji picker in NextJS using React. We gathered emoji data, created a UI component, passed the emoji data to the component, added an event handler, and used the selected emoji in the application. By following these steps, users can create an emoji picker that enhances the user experience on their NextJS site.