@fantasticmrdavid/emoji-mart

爱莫吉·马特 是一个自定义
网络的 emoji 拾取器 HTML 组件
演示




带给你的 错过 团队

目录

• 数据
• 选取器
• Emoji组件
• 无头搜索
• 从本地获取情感数据
• 国际化
• 实例
• QQ 为现代浏览器所建
• 发展

数据

拾取者工作所需的数据已经与图书馆完全脱钩. 这使得开发者可以灵活地更好地控制他们的应用程序捆绑大小,让他们选择如何和何时装入此数据. 数据可以是:

直接装入密码库

• 职业: Picker 即时制取, 数据可离线获取
• 计数 : 较慢的初始页面负载( 要装入的跳鼠文件)

yarn add @emoji-mart/data

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

new Picker({ data })

远程获取

• 职业: 仅在需要时获取数据,不会影响您的应用程序捆绑大小
• 计数 : 网络延迟, 无法脱机( 除非您配置服务工)

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

    return response.json()
  }
})

在这个例子中,数据是从内容传输网络中获取的,但是如果您想要主机数据,也可以从自己的域中获取.

选取器

反应

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>

选项/ 道具

自定义emojis

您可以使用自定义的emojis,提供一系列分类及其emojis. Emojis还支持多张皮肤色素,可以是GIFs或SVGs.

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',
    },
  },
}

Emoji组件

Emoji网络组件的用法无论您使用什么库都是一样的.

首先,您需要确保数据已经初始化 。 您只需每页装入一次即可 。 注意,如果你打电话 init 这样,你不一定需要将数据纳入你的道具中。 也没什么伤害.

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

init({ data })

然后可以使用您 HTML / JSX 中的 emoji 组件.

<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>

属性/ 道具

无头搜索

你可以不用皮克来搜 就像爱莫吉一样, 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') // => ['🎄', '🇨🇽', '🧑‍🎄', '🔔', '🤶', '🎁', '☃️', '❄️', '🎅', '⛄']

从本地获取情感数据

可以从本地的emoji获得emoji数据. 如果你想从本地的emoji那里得到EmojiID,这个是有用的. 就像爱莫吉一样, data 需要先初始化以获取 emoji 数据 .

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 用户界面支持 多种语言自由打开公关 如果你的失踪.

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

new Picker({ i18n })

由于文件小, 英语是内置的,不需要提供.

实例

• 类别
• 自定义 emoji 字体
• 自定义样式
• Emoji组件
• 无头搜索
• 黑色颜色

QQ 为现代浏览器所建

EmojiMart 依赖于这些 API, 如果您需要支持旧浏览器, 您可能需要包含多填充 :

• 阴影DOM (单位:千美元)MDN 数据(中文(简体) )
• 自定义元素 (单位:千美元)MDN 数据(中文(简体) )
• 交叉观察员 (单位:千美元)MDN 数据(中文(简体) )
• 自动/等待 (单位:千美元)MDN 数据(中文(简体) )

发展

yarn install
yarn dev