¿Cómo crear Emoji Picker en NextJS?

En este artículo, vamos a aprender cómo podemos agregar Emoji Picker en NextJS. NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac.

Enfoque: para agregar nuestro Selector de Emoji, vamos a usar el paquete react-input-emoji. El paquete react-input-emoji nos ayuda a agregar selectores de emoji en cualquier lugar de nuestra aplicación. Entonces, primero, instalaremos el paquete react-input-emoji y luego agregaremos el Emoji Picker en nuestra página de inicio.

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

npx create-next-app gfg

Instale el paquete requerido: ahora instalaremos el paquete react-input-emoji usando el siguiente comando:

npm i react-input-emoji

Estructura del proyecto: Se verá así.

Agregar el selector de emoji: podemos agregar fácilmente el selector de emoji en nuestra aplicación después de instalar el paquete react-input-emoji. Para este ejemplo, vamos a agregar el selector de emoji a nuestra página de inicio.

import React, { useState } from "react";
import InputEmoji from "react-input-emoji";
  
export default function EmojiInput() {
  const [text, setText] = useState("");
  
  return (
    <div>
    <h4>NextJs EmojiPicker - GeeksforGeeks</h4>
    <br/>
    <br/>
    <br/>
    <br/>
    <InputEmoji
      value={text}
      onChange={setText}
      cleanOnEnter
      placeholder="Type a message"
    />
    </div>
  );
}

Explicación: en el ejemplo anterior primero, estamos importando el componente InputEmoji del paquete instalado. Después de eso, agregaremos nuestro Emoji Picker usando el paquete instalado.

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

npm run dev

Producción: