How to add Emoji Picker in the React

You may need to add emoji picker when you are working with a chatbot application. So today we will show you how to add the emoji picker in the React application.

Checkout more articles on ReactJS

• Handle drag over and out in React
• How to add a Progress Bar in React
• Barcode scanner in React
• Test an input field using the React Testing Library
• How to add Google Analytics to the React App

Demo Application

Output - How to add emoji picker in the React - Clue Mediator

Step to add emoji picker in React

1. Add npm package
2. Implement emoji picker in app
3. Output

1. Add npm package

Here, we will use the emoji-picker-react npm package to add the picker in the react application. Run the following command to add the npm package.

npm i emoji-picker-react

2. Implement emoji picker in app

Let's create a simple page where we will have an input field and an emoji icon that we can use to show/hide the picker.

App.js

import React, { useState } from 'react';
import Picker from 'emoji-picker-react';

function App() {

  const [inputStr, setInputStr] = useState('');
  const [showPicker, setShowPicker] = useState(false);

  const onEmojiClick = (event, emojiObject) => {
    setInputStr(prevInput => prevInput + emojiObject.emoji);
    setShowPicker(false);
  };

  return (
    <div class="app">
      <h3>Add Emoji Picker in React App - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></h3>
      <div class="picker-container">
        <input class="input-style" value={inputStr} onchange="{e" ==""> setInputStr(e.target.value)} />
        <img class="emoji-icon" src="https://icons.getbootstrap.com/assets/icons/emoji-smile.svg" onclick="{()" ==""> setShowPicker(val => !val)} />
        {showPicker && <picker pickerstyle={{ width: '100%' }} onemojiclick={onEmojiClick}>}
      </picker></div>
    </div>
  );
}

export default App;

Here, we have imported the `emoji-picker-react` at the top of the page and we have used the bootstrap emoji icon to toggle the picker.

index.css

.picker-container {
  position: relative;
  width: 300px;
}

.emoji-icon {
  cursor: pointer;
  position: absolute;
  top: 8px;
  right: 5px;
}

.input-style {
  padding: 7px 30px 7px 10px;
  width: calc(100% - 40px);
  border-radius: 3px;
  border: 1px solid #999;
  margin-bottom: 10px;
}

3. Output

Run the application and check the output in the browser.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository StackBlitz Project