emoji-mart

Emoji Mart 是一个可自定义的
网页表情选择器 HTML 组件
演示




由 Missive 团队为您呈现

📖 目录

• 💾 数据
• 🏪 选择器
• 🙃 表情组件
• 🕵️‍♀️ 无头搜索
• 🔬 从原生获取表情数据
• 🗺 国际化
• 📚 示例
• 🤓 为现代浏览器构建
• 🛠 开发

💾 数据

选择器所需的数据已完全与库解耦。这使开发者能够更好地控制他们的应用程序包大小，并让他们选择如何以及何时加载这些数据。数据可以：

直接打包到你的代码库中

• 优点： 选择器立即渲染，数据可离线使用
• 缺点： 初始页面加载较慢（需加载更大的文件）

yarn add @emoji-mart/data

import data from '@emoji-mart/data'
import { Picker } from 'emoji-mart'

new Picker({ data })

远程获取

• 优点： 仅在需要时获取数据，不影响应用程序包大小
• 缺点： 网络延迟，离线不可用（除非你配置了 ServiceWorker）

import { Picker } from 'emoji-mart'
new Picker({
  data: async () => {
    const response = await fetch(
      'https://cdn.jsdelivr.net/npm/@emoji-mart/data',
    )

    return response.json()
  }
})

在这个例子中，数据是从内容分发网络获取的，但如果你想自己托管数据，也可以从你自己的域名获取。

🏪 选择器

React

npm install --save emoji-mart @emoji-mart/data @emoji-mart/react

import data from '@emoji-mart/data'
import Picker from '@emoji-mart/react'

function App() {
  return (
    <Picker data={data} onEmojiSelect={console.log} />
  )
}

浏览器

<script src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>
<script>
  const pickerOptions = { onEmojiSelect: console.log }
  const picker = new EmojiMart.Picker(pickerOptions)

  document.body.appendChild(picker)
</script>

选项 / 属性

自定义表情

你可以通过提供分类及其表情的数组来使用自定义表情。表情还支持多种肤色，可以是 GIF 或 SVG。

import data from '@emoji-mart/data'
import Picker from '@emoji-mart/react'

const custom = [
  {
    id: 'github',
    name: 'GitHub',
    emojis: [
      {
        id: 'octocat',
        name: 'Octocat',
        keywords: ['github'],
        skins: [{ src: './octocat.png' }],
      },
      {
        id: 'shipit',
        name: 'Squirrel',
        keywords: ['github'],
        skins: [
          { src: './shipit-1.png' }, { src: './shipit-2.png' }, { src: './shipit-3.png' },
          { src: './shipit-4.png' }, { src: './shipit-5.png' }, { src: './shipit-6.png' },
        ],
      },
    ],
  },
  {
    id: 'gifs',
    name: 'GIFs',
    emojis: [
      {
        id: 'party_parrot',
        name: 'Party Parrot',
        keywords: ['dance', 'dancing'],
        skins: [{ src: './party_parrot.gif' }],
      },
    ],
  },
]

function App() {
  return (
    <Picker data={data} custom={custom} />
  )
}

自定义分类图标

你可以通过提供一个以分类名称为键、图标为值的对象来使用自定义分类图标。目前支持的格式是 svg 字符串和 src。查看示例。

const customCategoryIcons = {
  categoryIcons: {
    activity: {
      svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M57.89 397.2c-6.262-8.616-16.02-13.19-25.92-13.19c-23.33 0-31.98 20.68-31.98 32.03c0 6.522 1.987 13.1 6.115 18.78l46.52 64C58.89 507.4 68.64 512 78.55 512c23.29 0 31.97-20.66 31.97-32.03c0-6.522-1.988-13.1-6.115-18.78L57.89 397.2zM496.1 352c-44.13 0-79.72 35.75-79.72 80s35.59 80 79.72 80s79.91-35.75 79.91-80S540.2 352 496.1 352zM640 99.38c0-13.61-4.133-27.34-12.72-39.2l-23.63-32.5c-13.44-18.5-33.77-27.68-54.12-27.68c-13.89 0-27.79 4.281-39.51 12.8L307.8 159.7C262.2 192.8 220.4 230.9 183.4 273.4c-24.22 27.88-59.18 63.99-103.5 99.63l56.34 77.52c53.79-35.39 99.15-55.3 127.1-67.27c51.88-22 101.3-49.87 146.9-82.1l202.3-146.7C630.5 140.4 640 120 640 99.38z"/></svg>',
    },
    people: {
      src: './people.png',
    },
  },
}

🙃 表情组件

无论你使用哪种库，表情 Web 组件的使用方式都是相同的。

首先，你需要确保数据已经初始化。你只需要在每次页面加载时调用一次。注意，如果你像这样调用 init，你不一定需要在 Picker 属性中包含数据。包含也无妨，它会自动忽略。

import data from '@emoji-mart/data'
import { init } from 'emoji-mart'

init({ data })

然后你就可以在你的 HTML / JSX 中使用表情组件了。

<em-emoji id="+1" size="2em"></em-emoji>
<em-emoji id="+1" skin="2"></em-emoji>
<em-emoji shortcodes=":+1::skin-tone-1:"></em-emoji>
<em-emoji shortcodes=":+1::skin-tone-2:"></em-emoji>

属性 / Props

🕵️‍♀️ 无界面搜索

您可以在不使用选择器的情况下进行搜索。与表情符号组件一样，必须先初始化data才能使用搜索索引。

import data from '@emoji-mart/data'
import { init, SearchIndex } from 'emoji-mart'

init({ data })

async function search(value) {
  const emojis = await SearchIndex.search(value)
  const results = emojis.map((emoji) => {
    return emoji.skins[0].native
  })

  console.log(results)
}

search('christmas') // => ['🎄', '🇨🇽', '🧑‍🎄', '🔔', '🤶', '🎁', '☃️', '❄️', '🎅', '⛄']

🔬 从原生表情获取数据

您可以从原生表情符号获取表情数据。如果您想从原生表情符号获取表情ID，这很有用。与表情符号组件一样，必须先初始化data才能检索表情数据。

import data from '@emoji-mart/data'
import { init, getEmojiDataFromNative } from 'emoji-mart'

init({ data })

getEmojiDataFromNative('🤞🏿').then(console.log)
/* {
  aliases: ['hand_with_index_and_middle_fingers_crossed'],
  id: 'crossed_fingers',
  keywords: ['hand', 'with', 'index', 'and', 'middle', 'good', 'lucky'],
  name: 'Crossed Fingers',
  native: '🤞🏿',
  shortcodes: ':crossed_fingers::skin-tone-6:',
  skin: 6,
  unified: '1f91e-1f3ff',
} */

🗺 国际化

EmojiMart UI支持多种语言，如果缺少您的语言，欢迎提交PR。

import i18n from '@emoji-mart/data/i18n/fr.json'
i18n.search_no_results_1 = 'Aucun emoji'

new Picker({ i18n })

考虑到文件大小较小，英语是内置的，无需提供。

📚 示例

• 分类
• 自定义表情字体
• 自定义样式
• 表情组件
• 无界面搜索
• Slack颜色

🤓 为现代浏览器构建

EmojiMart依赖于以下API，如果您需要支持较旧的浏览器，可能需要包含polyfills：

• Shadow DOM (MDN)
• 自定义元素 (MDN)
• IntersectionObserver (MDN)
• Async/Await (MDN)

🛠 开发

yarn install
yarn dev