emoji-mart

<div align="center"> <br><b>Emoji Mart</b> 是一个可自定义的<br>网页表情选择器 HTML 组件 <br><a href="https://missiveapp.com/open/emoji-mart">演示</a> <br><br><a href="https://missiveapp.com/open/emoji-mart"><img width="639" alt="EmojiMart" src="https://yellow-cdn.veclightyear.com/835a84d5/1429e900-06a3-4e82-b807-904969d623ef.png"></a> <br><br><a title="团队邮件、团队聊天、团队任务，一个应用搞定" href="https://missiveapp.com"><img width="34" alt="Missive | 团队邮件、团队聊天、团队任务，一个应用搞定" src="https://yellow-cdn.veclightyear.com/835a84d5/73286333-a2ad-425d-b4fa-21a153a7e908.png"></a> <br>由 <a title="团队邮件、团队聊天、团队任务，一个应用搞定" href="https://missiveapp.com">Missive</a> 团队为您呈现 </div>

📖 目录

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

💾 数据

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

直接打包到你的代码库中

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

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>

选项 / 属性

选项	默认值	可选值	描述
data	{}		选择器使用的数据
i18n	{}		选择器使用的本地化数据
categories	[]	frequent, people, nature, foods, activity, places, objects, symbols, flags	选择器显示的分类。顺序会被遵守。
custom	[]		自定义表情
onEmojiSelect	null		选择表情时的回调
onClickOutside	null		点击选择器外部时的回调
onAddCustomEmoji	null		点击"添加自定义表情"按钮时的回调。只有提供此回调时才会显示该按钮。当搜索无结果时显示。
autoFocus	false		选择器是否应自动聚焦到搜索输入框
categoryIcons	{}		自定义分类图标
dynamicWidth	false		选择器是否应基于 <em-emoji-picker> 的宽度动态计算 perLine。启用时，perLine 将被忽略
emojiButtonColors	[]	例如 #f00, pink, rgba(155,223,88,.7)	影响悬停背景颜色的颜色数组
emojiButtonRadius	100%	例如 6px, 1em, 100%	表情按钮的圆角半径
emojiButtonSize	36		表情按钮的大小
emojiSize	24		表情（按钮内）的大小
emojiVersion	14	1, 2, 3, 4, 5, 11, 12, 12.1, 13, 13.1, 14	使用的表情数据版本。@emoji-mart/data 目前支持的最新版本是 14
exceptEmojis	[]		将从选择器中排除的表情 ID 列表
icons	auto	auto, outline, solid	选择器使用的图标类型。浅色主题使用 outline，深色主题使用 solid。
locale	en	en, ar, be, cs, de, es, fa, fi, fr, hi, it, ja, ko, nl, pl, pt, ru, sa, tr, uk, vi, zh	选择器使用的语言
maxFrequentRows	4		显示的最大常用行数。0 将禁用常用分类
navPosition	top	top, bottom, none	导航栏的位置
noCountryFlags	false		是否显示国旗。如果未提供，将自动处理（Windows 不支持国旗）
noResultsEmoji	cry		无结果时使用的表情 ID
perLine	9		每行显示的表情数量
previewEmoji	point_up		未悬停任何表情时用于预览的表情 ID。预览位置在底部时为 point_up，在顶部时为 point_down。
previewPosition	bottom	top, bottom, none	预览的位置
searchPosition	sticky	sticky, static, none	搜索输入框的位置
set	native	native, apple, facebook, google, twitter	选择器使用的表情集。native 性能最佳，其他依赖于精灵图。
skin	1	1, 2, 3, 4, 5, 6	表情的肤色
skinTonePosition	preview	preview, search, none	肤色选择器的位置
theme	auto	auto, light, dark	选择器的颜色主题
getSpritesheetURL	null		返回选择器使用的精灵图 URL 的函数。它应与提供的数据兼容。

自定义表情

你可以通过提供分类及其表情的数组来使用自定义表情。表情还支持多种肤色，可以是 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

属性	示例	描述
id	+1	表情符号ID
shortcodes	:+1::skin-tone-2:	表情符号短代码
native	👍	原生表情符号
size	2em	内联元素大小
fallback	:shrug:	当找不到表情符号时显示的字符串
set	native	表情符号集：native, apple, facebook, google, twitter
skin	1	表情符号肤色：1, 2, 3, 4, 5, 6

🕵️‍♀️ 无界面搜索

您可以在不使用选择器的情况下进行搜索。与表情符号组件一样，必须先初始化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