如何在 ReactJS 中创建表情符号选择器？

在本文中，我们将学习如何在 ReactJs 中创建 Emoji Picker。 React 是一个免费的开源前端 JavaScript 库，用于构建用户界面或 UI 组件。它由 Facebook 和一个由个人开发者和公司组成的社区维护。

方法：要创建我们的电子表格，我们将使用 emoji-picker-react 包，因为它功能强大、轻量级且完全可定制。之后，我们将使用已安装的软件包在我们的主页上添加一个表情符号选择器。

创建 ReactJs 应用程序：您可以使用以下命令创建一个新的 ReactJs 项目：

npx create-react-app gfg

模块安装：使用以下命令安装 emoji-picker-react 包：

npm i emoji-picker-react

项目结构：它看起来像这样。

文件名：App.js在这个例子中，我们将使用我们安装的包在我们的应用程序的主页上添加表情符号选择器。为此，在 App.js 文件中添加以下内容。

Javascript

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 (
    

      
GeeksforGeeks Emoji Picker
      {chosenEmoji ? (
        Your Emoji: {chosenEmoji.emoji}
      ) : (
        No Emoji
      )}
      
    
  );
};

说明：在上面的例子中，我们首先从 emoji-picker-react 包中导入 Picker 组件。之后，我们使用我们的 useState 添加初始数据并更新表情符号。然后我们使用 Picker 组件添加我们的 Emoji PIcker。

运行应用程序的步骤：在终端中运行以下命令来运行应用程序。

npm start

输出：