DEV Community

Cover image for πŸ˜ƒ Add Emoji Picker To An Input Field In React App [Easy way].
Chetan Atrawalkar
Chetan Atrawalkar

Posted on

πŸ˜ƒ 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 can’t 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.

I’m 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! emoji

πŸ’  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"
        />
      )
    }
Enter fullscreen mode Exit fullscreen mode

Output ⏬.

demo

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 ❀️

Top comments (4)

Collapse
 
chetan_atrawalkar profile image
Chetan Atrawalkar

It's Easy And Useful Way πŸ€—πŸ˜€

Collapse
 
fahimsjd77 profile image
fahimeh sajadi

Cannot find module 'react-input-emoji' or its corresponding type declarations.
why i get this error when i import package?

Collapse
 
stefiecaff profile image
Tronic

I am wondering if I use this component can I still use default input attributes, like pattern and type and name to list a few