使用React的表情选择应用程序

在本文中，我们将使用ReactJS框架创建一个交互式的表情应用程序。该项目基本上实现了功能组件并相应地管理状态。

该应用程序允许用户浏览各种表情并选择用于交流。一旦用户点击表情，所选表情将被复制到剪贴板。用户可以将其粘贴到聊天窗口中并用于交流和表达。还向用户提供了一个弹框消息，指示所选表情已被复制到剪贴板。

让我们交互地看一下我们最终的项目会是什么样子：

使用React的表情选择应用程序

所使用的技术/先决条件：

ReactJS
CSS
JSX
React中的函数组件

方法：

给定的代码表示使用ReactJS开发的交互式表情符号应用程序项目。该应用程序允许用户使用各种表情符号进行沟通和表达。开发的应用程序提供了一个友好的用户界面，用户可以轻松浏览由模块“ emoji-picker-react 提供的一系列表情符号。开发的应用程序的主要功能包括一个功能，允许用户通过选择表情符号来浏览特定的表情符号。当用户选择表情符号时，应用程序将该表情符号复制到剪贴板，以便用户可以将其粘贴到聊天窗口中。我们还使用了“ react-toastify” 包来向用户显示一个时尚的弹出消息，告知用户已将表情符号复制到剪贴板。这使用户能够轻松选择表情符号并在沟通中使用它们。

项目结构：

使用React的表情选择应用程序

package.json 中的依赖关系将如下所示： this:

{  
  "name": "emoji-app",  
  "version": "0.1.0",  
  "private": true,  
  "dependencies": {  
    "@testing-library/jest-dom": "^5.16.5",  
    "@testing-library/react": "^13.4.0",  
    "@testing-library/user-event": "^13.5.0",  
    "emoji-picker-react": "^4.4.10",  
    "react": "^18.2.0",  
    "react-dom": "^18.2.0",  
    "react-scripts": "5.0.1",  
    "react-toastify": "^9.1.3",  
    "web-vitals": "^2.1.4"  
  },

创建应用的步骤：

步骤1： 在VSCode IDE中使用以下命令设置React项目。

npx create-react-app <<name of project>>

步骤2： 通过执行下面的命令，导航到新创建的项目文件夹。

cd <<Name_of_project>>

步骤3: 由于我们在这个项目中使用了 emoji-picker-react 和 react-toastify ，我们需要使用npm来安装它们。

npm install emoji-picker-react react-toastify

示例: 将以下代码插入App.js和styles/App.css文件中，这些文件在上述目录结构中提到。

App.js: 该文件表示Emoji App的主要组件，管理状态，渲染其他组件，并显示表情列表和选定的表情详情。
App.css: 该文件包含所有的样式代码，无论是h1标签的样式还是toast消息的样式。应用程序的全部外观和感觉都在这个样式文件中指定。

//App.js 
import React, { useState } from 'react'; 
import './App.css'; 
import EmojiPicker from 'emoji-picker-react'; 
import { ToastContainer, toast } from 'react-toastify'; 
import 'react-toastify/dist/ReactToastify.css'; 
  
const App = () => { 
    const [choosenEmoji, setChoosenEmoji] = useState(''); 
  
    const copyEmojiFunction = (text) => { 
        const textArea = document.createElement('textarea'); 
        textArea.value = text; 
        document.body.appendChild(textArea); 
        textArea.select(); 
        document.execCommand('copy'); 
        document.body.removeChild(textArea); 
    }; 
  
    const emojiPickerFunction = (emojiObject) => { 
        const emoji = emojiObject.emoji; 
        setChoosenEmoji(emoji); 
        copyEmojiFunction(emoji); 
        toast.success('Copied to Clipboard!', { 
            position: 'top-right', 
            autoClose: 2000, 
            hideProgressBar: true, 
            closeOnClick: true, 
            pauseOnHover: false, 
            draggable: false, 
            progress: undefined, 
        }); 
    }; 
  
    return ( 
        <div className="emoji-app"> 
            <h1>GeeksforGeeks Emoji Application</h1> 
            {choosenEmoji && ( 
                <div className="selected-emoji"> 
                    <p>Selected Emoji:</p> 
                    <span>{choosenEmoji}</span> 
                </div> 
            )} 
            <div className="emoji-picker"> 
                <EmojiPicker onEmojiClick={emojiPickerFunction} /> 
            </div> 
            <ToastContainer /> 
        </div> 
    ); 
}; 
  
export default App;

CSS

/*App.css*/
body { 
    font-family: 'Arial', sans-serif; 
    background-color: #f5f5f5; 
    margin: 0; 
    padding: 0; 
} 
  
.emoji-app { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    margin-top: 50px; 
} 
  
h1 { 
    font-size: 36px; 
    margin-bottom: 20px; 
    color: #3deb08; 
} 
  
.selected-emoji { 
    margin-top: 30px; 
    padding: 10px; 
    border-radius: 8px; 
    background-color: #f7d794; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
    text-align: center; 
} 
  
.selected-emoji p { 
    margin: 0; 
    font-size: 16px; 
    color: #2d3436; 
} 
  
.selected-emoji span { 
    font-size: 40px; 
    display: block; 
    margin-top: 10px; 
} 
  
.emoji-picker { 
    background-color: rgba(255, 255, 255, 0.9); 
    backdrop-filter: blur(10px); 
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
    margin-top: 20px; 
    padding: 20px; 
} 
  
.emoji-list { 
    display: grid; 
    grid-template-columns: repeat(6, 1fr); 
    gap: 10px; 
} 
  
.emoji { 
    font-size: 30px; 
    cursor: pointer; 
    text-align: center; 
    transition: transform 0.2s ease-in-out; 
    filter: brightness(100%); 
} 
  
.emoji:hover { 
    transform: scale(1.2); 
    filter: brightness(120%); 
} 
  
.Toastify__toast-container { 
    z-index: 9999; 
} 
  
.Toastify__toast--success { 
    background-color: #2ecc71; 
} 
  
.Toastify__toast--error { 
    background-color: #e74c3c; 
} 
  
.Toastify__toast-body { 
    font-size: 16px; 
    color: #011af8; 
} 
  
.Toastify__progress-bar { 
    background-color: rgba(255, 255, 255, 0.7); 
}

运行应用程序的步骤：

1. 在终端中执行以下命令。