¿Cómo crear Emoji Picker en ReactJS?

En este artículo, vamos a aprender cómo podemos crear Emoji Picker en ReactJs. React es una biblioteca JavaScript front-end gratuita y de código abierto para crear interfaces de usuario o componentes de interfaz de usuario. Es mantenido por Facebook y una comunidad de desarrolladores individuales y empresas.

Enfoque: para crear nuestra hoja de cálculo, vamos a utilizar el paquete emoji-picker-react porque es poderoso, liviano y totalmente personalizable. Después de eso, agregaremos un selector de emoji en nuestra página de inicio usando el paquete instalado.

Crear aplicación ReactJs: puede crear un nuevo proyecto ReactJs usando el siguiente comando:

npx create-react-app gfg

Instalación del módulo: Instale el paquete emoji-picker-react usando el siguiente comando:

npm i emoji-picker-react

Estructura del proyecto: Se verá así.

Nombre de archivo: App.js En este ejemplo, agregaremos el selector de emoji en la página de inicio de nuestra aplicación usando el paquete que instalamos. Para ello, agregue el siguiente contenido en el archivo App.js.

import React, { useState } from 'react';
import Picker from 'emoji-picker-react';
  
export default function Emoji(){
  const [chosenEmoji, setChosenEmoji] = useState(null);
  
  const onEmojiClick = (event, emojiObject) => {
    setChosenEmoji(emojiObject);
  };
  
  return (
    <div>
      <h3>GeeksforGeeks Emoji Picker</h3>
      {chosenEmoji ? (
        <span>Your Emoji: {chosenEmoji.emoji}</span>
      ) : (
        <span>No Emoji</span>
      )}
      <Picker onEmojiClick={onEmojiClick} />
    </div>
  );
};

Explicación: en el ejemplo anterior primero, estamos importando el componente Picker del paquete emoji-picker-react. Después de eso, usamos nuestro useState para agregar los datos iniciales y actualizar el emoji. Luego estamos agregando nuestro Emoji PIcker usando el componente Picker.

Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.

npm start

Producción: