An Interest In:
Web News this Week
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
- April 12, 2024
August 17, 2021 05:05 am GMT
Original Link: https://dev.to/chetan_atrawalkar/add-emoji-picker-to-an-input-field-in-react-app-easy-way-4g4e
Add Emoji Picker To An Input Field In React App [Easy way].
Simple And Easiest way to add an emoji picker to your React app.
Emojis are now such an essential part of how we communicate that we simply cant afford to leave them out of our applications. They add an extra dimension to how we express ourselves in our day-to-day interactions that can be otherwise difficult to do with text only.
How to add an emoji picker to your React App.
Im using react-input-emoji the best solution from my opinion.
- React InputEmoji provides a simple way to have an input element with emoji picker support. Click the picker button next to the input field and select an emoji from the popup window. Done!
Let's Checkout....
Step 1 :- Install
You can get it on npm.npm install react-input-emoji --save
Step 2 :- Usage
After install import the react-input-emoji component to display your input with emoji.
import React, { useState } from 'react' import InputEmoji from 'react-input-emoji' export default function Example () { const [ text, setText ] = useState('') function handleOnEnter (text) { console.log('enter', text) } return ( <InputEmoji value={text} onChange={setText} cleanOnEnter onEnter={handleOnEnter} placeholder="Type a message" /> ) }
Output .
Click Here For More Details.
Please share your valuable feedback in comment section what think about this.
Don't forget to like and subscribe Keep Following .
Keep Claim And Just Code It .
Support With Coffee
Original Link: https://dev.to/chetan_atrawalkar/add-emoji-picker-to-an-input-field-in-react-app-easy-way-4g4e
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To