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:
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.
Javascript
// 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>w3wiki 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.