如何在 NextJS 中创建表情符号选择器?
在本文中,我们将学习如何在 NextJS 中添加 Emoji Picker。 NextJS 是一个基于 React 的框架。它有能力为 Windows、Linux 和 mac 等不同平台开发漂亮的 Web 应用程序。
方法:要添加我们的表情符号选择器,我们将使用 react-input-emoji 包。 react-input-emoji 包帮助我们在应用程序的任何位置添加表情符号选择器。所以首先,我们将安装 react-input-emoji 包,然后我们将在我们的主页上添加表情符号选择器。
创建 NextJS 应用程序:您可以使用以下命令创建一个新的 NextJs 项目:
npx create-next-app gfg
安装所需的包:现在我们将使用以下命令安装 react-input-emoji 包:
npm i react-input-emoji
项目结构:它看起来像这样。
添加表情选择器:安装 react-input-emoji 包后,我们可以轻松地在我们的应用中添加表情选择器。对于这个例子,我们将表情符号选择器添加到我们的主页。
index.js
import React, { useState } from "react";
import InputEmoji from "react-input-emoji";
export default function EmojiInput() {
const [text, setText] = useState("");
return (
NextJs EmojiPicker - GeeksforGeeks
);
}
说明:在上面的例子中,我们首先从安装的包中导入 InputEmoji 组件。之后,我们将使用已安装的包添加我们的表情符号选择器。
运行应用程序的步骤:在终端中运行以下命令以运行应用程序
npm run dev
输出: