Emoji Mart NPM - 让你的表情符号起死回生

Emoji Mart是一个强大的JavaScript库，它为Web应用程序提供了完整的可配置表情符号选择器。它可以让你的用户轻松地在你的应用程序中选择和插入与他们的情绪共鸣的表情符号，从而增强用户体验。

特点

• 可配置性高：Emoji Mart可以轻松地适应各种尺寸、颜色和其他需求的设计风格
• 支持搜索：用户可以根据关键词搜索表情符号
• 多种主题：Emoji Mart提供了多个主题供选择，包括默认和棕色主题
• 多语言支持：Emoji Mart支持多种语言，包括英语、西班牙语、法语、德语、意大利语、日语、韩语和荷兰语

安装 Emoji Mart

你可以通过 npm 来安装 Emoji Mart :

npm install emoji-mart

或者使用 Yarn 安装 :

yarn add emoji-mart

集成 Emoji Mart

要将Emoji Mart集成到你的应用程序中，你需要导入 Picker 组件，并将其放置在你的代码中。这是一个简单的示例：

import React from 'react';
import { Picker } from 'emoji-mart';

function EmojiPicker() {
  return (
    <Picker />
  )
}

export default EmojiPicker;

你可以使用包含 Picker 的任何 React 组件。「Emoji Mart」中的 Picker 组件需要一个 onSelect 属性，以便在选择表情符号后触发一个函数。请看下面的示例：

import React, { useState } from 'react';
import { Picker } from 'emoji-mart';

function EmojiPicker() {
  const [emoji, setEmoji] = useState(null);

  function handleEmojiSelect(selectedEmoji) {
    setEmoji(selectedEmoji);
  }

  return (
    <>
      {!!emoji && <div>You have selected {emoji.native} emoji!</div>}

      <Picker onSelect={handleEmojiSelect} />
    </>
  )
}

export default EmojiPicker;

Emoji Mart元素

Emoji Mart还提供了几种可配置的组件，以自定义你的表情符号选择器。

• Emoji: 用于呈现一个包含表情符号的 <span> 元素，支持不同的尺寸和自定义样式。
• EmojiIndex: 用于通过名称和分类检索表情符号的索引。
• EmojiPicker: 用于呈现Emoji Mart的表情符号选择器。支持自定义主题、搜索和自定义显示。
• FrequentlyUsed: 用于呈现常用表情符号的面板。
• Recent: 用于呈现最近使用的表情符号的面板。

Emoji Mart 代码片段

这里提供了一个基本的 Emoji Mart 代码片段。

import React, { useState } from 'react';
import { Picker } from 'emoji-mart';
import 'emoji-mart/css/emoji-mart.css';

function EmojiPicker() {
  const [emoji, setEmoji] = useState(null);

  function handleEmojiSelect(selectedEmoji) {
    setEmoji(selectedEmoji);
  }

  return (
    <>
      {!!emoji && <div>You have selected {emoji.native} emoji!</div>}

      <Picker onSelect={handleEmojiSelect} />
    </>
  )
}

export default EmojiPicker;

Markdown 格式

Emoji Mart NPM - 让你的表情符号起死回生

Emoji Mart是一个强大的JavaScript库，它为Web应用程序提供了完整的可配置表情符号选择器。它可以让你的用户轻松地在你的应用程序中选择和插入与他们的情绪共鸣的表情符号，从而增强用户体验。

特点

• 可配置性高：Emoji Mart可以轻松地适应各种尺寸、颜色和其他需求的设计风格
• 支持搜索：用户可以根据关键词搜索表情符号
• 多种主题：Emoji Mart提供了多个主题供选择，包括默认和棕色主题
• 多语言支持：Emoji Mart支持多种语言，包括英语、西班牙语、法语、德语、意大利语、日语、韩语和荷兰语

安装 Emoji Mart

你可以通过 npm 来安装 Emoji Mart :

npm install emoji-mart

或者使用 Yarn 安装 :

yarn add emoji-mart

集成 Emoji Mart

要将Emoji Mart集成到你的应用程序中，你需要导入 Picker 组件，并将其放置在你的代码中。这是一个简单的示例：

import React from 'react';
import { Picker } from 'emoji-mart';

function EmojiPicker() {
  return (
    <Picker />
  )
}

export default EmojiPicker;

你可以使用包含 Picker 的任何 React 组件。「Emoji Mart」中的 Picker 组件需要一个 onSelect 属性，以便在选择表情符号后触发一个函数。请看下面的示例：

import React, { useState } from 'react';
import { Picker } from 'emoji-mart';

function EmojiPicker() {
  const [emoji, setEmoji] = useState(null);

  function handleEmojiSelect(selectedEmoji) {
    setEmoji(selectedEmoji);
  }

  return (
    <>
      {!!emoji && <div>You have selected {emoji.native} emoji!</div>}

      <Picker onSelect={handleEmojiSelect} />
    </>
  )
}

export default EmojiPicker;

Emoji Mart元素

Emoji Mart还提供了几种可配置的组件，以自定义你的表情符号选择器。

• Emoji: 用于呈现一个包含表情符号的 <span> 元素，支持不同的尺寸和自定义样式。
• EmojiIndex: 用于通过名称和分类检索表情符号的索引。
• EmojiPicker: 用于呈现Emoji Mart的表情符号选择器。支持自定义主题、搜索和自定义显示。
• FrequentlyUsed: 用于呈现常用表情符号的面板。
• Recent: 用于呈现最近使用的表情符号的面板。

Emoji Mart 代码片段

这里提供了一个基本的 Emoji Mart 代码片段。

import React, { useState } from 'react';
import { Picker } from 'emoji-mart';
import 'emoji-mart/css/emoji-mart.css';

function EmojiPicker() {
  const [emoji, setEmoji] = useState(null);

  function handleEmojiSelect(selectedEmoji) {
    setEmoji(selectedEmoji);
  }

  return (
    <>
      {!!emoji && <div>You have selected {emoji.native} emoji!</div>}

      <Picker onSelect={handleEmojiSelect} />
    </>
  )
}

export default EmojiPicker;

代码片段中使用的引用资源链接如下：

import { Picker } from 'emoji-mart';
import 'emoji-mart/css/emoji-mart.css';