Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create Emoji Picker in ReactJS ?

  • Last Updated : 08 Nov, 2021

In this article, we are going to learn how we can create Emoji Picker in ReactJs. React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies.

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.

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

npx create-react-app gfg

Module Installation: Install the emoji-picker-react package using the below command:

npm i emoji-picker-react

Project Structure: It will look like this.

Filename: App.js In this example, we are going to add the emoji picker on the homepage of our app using the package that we installed. For this, add the below content in the App.js file.

Javascript




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);
  };
  
  return (
    <div>
      <h3>GeeksforGeeks Emoji Picker</h3>
      {chosenEmoji ? (
        <span>Your Emoji: {chosenEmoji.emoji}</span>
      ) : (
        <span>No Emoji</span>
      )}
      <Picker onEmojiClick={onEmojiClick} />
    </div>
  );
};


Explanation: In the above example first, we are importing the Picker component from the emoji-picker-react package. After that, we are using our useState to add the initial data and update the emoji. Then we are adding our Emoji PIcker using the Picker component.

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

npm start

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!