ایموجی انقدر این روزها پرطرفدار شده که بدون آن نمی توان یک چت درست و حسابی کرد! اصلاً بدون گذاشتن یک ایموجی ناقابل ، چطور باید منظور اصلی مان را به طرف مقابل برسانیم؟! 🙂

از نظر من ، بهترین راه پیاده سازی ایموجی ها در react ، استفاده از react-input-emoji است.

React InputEmoji این امکان را می دهد که به فیلد ورودی یا input field خود، مجموعه ای از ایموجی ها را اضافه کنید تا کاربر بتواند هر کدام را که خواست انتخاب کند.

مرحله اول: نصبش کنید!

npm install react-input-emoji --save

مرحله دوم: استفاده اش کنید!

بعد از نصب، کامپوننت react-input-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"
        />
      )
    }

نتیجه: