How to add an emoji picker to an input field in react app

Creating a new react app

npx create-react-app 

Starting the app -

# npm
npm start
# yarn
yarn start

Installing the required dependencies -

# npm
npm install emoji-mart
# yarn
yarn add emoji-mart

Cleanup process

• Delete everything inside the div in App.js and remove the import of logo.svg on top.
• Delete logo.svg file.
• Delete everything in App.css.
• In index.css add this line of code -

Creating an input

Mapping to a state

Creating an svg button for emojis

Adding some styles in App.css

Creating a state for showing picker

const [showEmojis, setShowEmojis] = useState(false);

Attaching it to the onClick of button

<button className="button" onClick={() => setShowEmojis(!showEmojis)}>

Rendering the emoji picker

We will import Picker and the CSS like this

Adding the emojis with the text in the input

Add an onSelect to the picker

<Picker onSelect={addEmoji} />

Create the addEmoji function

Now our emoji picker is working! 🥳

Useful links:

• Github repository
• React docs
• All socials