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
Demo Application
Step to add emoji picker in React
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.
1 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | 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 className="app"> <h3>Add Emoji Picker in React App - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></h3> <div className="picker-container"> <input className="input-style" value={inputStr} onChange={e => setInputStr(e.target.value)} /> <img className="emoji-icon" src="https://icons.getbootstrap.com/assets/icons/emoji-smile.svg" onClick={() => setShowPicker(val => !val)} /> {showPicker && <Picker pickerStyle={{ width: '100%' }} onEmojiClick={onEmojiClick} />} </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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .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..!! 🙂
