How To Add Emoji Picker In React Js

In this article we will learn about how to add emoji picker in react js.

The most straightforward method for adding an emoji picker to your React application.

Emojis are becoming such a vital part of how we communicate that we just can’t afford to keep them out of our applications.

They add a fresh dimension to our regular encounters with others that can be difficult to express through text alone.

How to include a picker for emojis in your React app.

React InputEmoji offers a simple method for creating an input element with emoji picker support.

Click the picker icon next to the input field to select an emoji from the popup window. Done!

Step 1 :- Install

It is available on npm.

npm install react-input-emoji --save

Step 2 :- Usage

Import the react-input-emoji component after installation if you want to show your input using emoticons.

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"
        />
      )
    }

props

onChange – When the input value changes, this function is called. The current value is the first argument.

onResize – When the input’s width or height changes, this method is called. The current size value is the first argument.

cleanOnEnter – After the keydown event, clean the input value.

You can see below Output

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories