# @fantasticmrdavid/emoji-mart 中文文档 规范地址：https://npmcn.com/package/%40fantasticmrdavid/emoji-mart/ 版本：5\.5\.2-c npm 元数据更新时间：2023-05-31T03:26:25.248Z 中文译文更新时间：2026-11-14T10:00:28.585Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40fantasticmrdavid/emoji-mart 原文对照：https://npmcn.com/package/%40fantasticmrdavid/emoji-mart/?lang=original 项目主页：https://missiveapp.com/open/emoji-mart 源码仓库：https://github.com/missive/emoji-mart ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1.6 MB，11 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：0 个 - 首次发布：2023-05-26T00:50:37.621Z - 最新版本发布：2023-05-31T03:26:25.123Z - 近 30 天下载量：28465（2026-10-15 至 2026-11-13，npm 官方下载统计） - 已发布版本数：3（近 12 个月 0 个） ## 中文简介 网络取相机 ## 安装 ```sh npm install @fantasticmrdavid/emoji-mart ``` 也可以使用：`pnpm add @fantasticmrdavid/emoji-mart`、`yarn add @fantasticmrdavid/emoji-mart`、`bun add @fantasticmrdavid/emoji-mart` ## README **爱莫吉·马特** 是一个自定义 网络的 emoji 拾取器 HTML 组件 [演示](https://missiveapp.com/open/emoji-mart) [![EmojiMart](https://user-images.githubusercontent.com/436043/163686169-766ef715-89b5-4ada-88d7-672623713bc0.png)](https://missiveapp.com/open/emoji-mart) [![Missive | Team email, team chat, team tasks, one app](https://user-images.githubusercontent.com/436043/163655413-df22f8cc-99a7-4d8d-a5c1-105c435910d7.png)](https://missiveapp.com/ "Team email, team chat, team tasks, one app") 带给你的 [错过](https://missiveapp.com/ "Team email, team chat, team tasks, one app") 团队 ## 目录 - [数据](https://npmcn.com/package/%40fantasticmrdavid/emoji-mart/#readme--data) - [选取器](https://npmcn.com/package/%40fantasticmrdavid/emoji-mart/#readme--picker) - [Emoji组件](https://npmcn.com/package/%40fantasticmrdavid/emoji-mart/#readme--emoji-component) - [无头搜索](https://npmcn.com/package/%40fantasticmrdavid/emoji-mart/#readme-%EF%B8%8F%EF%B8%8F-headless-search) - [从本地获取情感数据](https://npmcn.com/package/%40fantasticmrdavid/emoji-mart/#readme--get-emoji-data-from-native) - [国际化](https://npmcn.com/package/%40fantasticmrdavid/emoji-mart/#readme--internationalization) - [实例](https://npmcn.com/package/%40fantasticmrdavid/emoji-mart/#readme--examples) - [QQ 为现代浏览器所建](https://npmcn.com/package/%40fantasticmrdavid/emoji-mart/#readme--built-for-modern-browsers) - [发展](https://npmcn.com/package/%40fantasticmrdavid/emoji-mart/#readme--development) ## 数据 拾取者工作所需的数据已经与图书馆完全脱钩. 这使得开发者可以灵活地更好地控制他们的应用程序捆绑大小,让他们选择如何和何时装入此数据. 数据可以是: ### 直接装入密码库 - **职业:** Picker 即时制取, 数据可离线获取 - **计数 :** 较慢的初始页面负载( 要装入的跳鼠文件) ```sh yarn add @emoji-mart/data ``` ```js import data from '@emoji-mart/data' import { Picker } from 'emoji-mart' new Picker({ data }) ``` ### 远程获取 - **职业:** 仅在需要时获取数据,不会影响您的应用程序捆绑大小 - **计数 :** 网络延迟, 无法脱机( 除非您配置服务工) ```js import { Picker } from 'emoji-mart' new Picker({ data: async () => { const response = await fetch( 'https://cdn.jsdelivr.net/npm/@emoji-mart/data', ) return response.json() } }) ``` 在这个例子中,数据是从内容传输网络中获取的,但是如果您想要主机数据,也可以从自己的域中获取. ## 选取器 ### 反应 ```sh npm install --save emoji-mart @emoji-mart/data @emoji-mart/react ``` ```js import data from '@emoji-mart/data' import Picker from '@emoji-mart/react' function App() { return ( ) } ``` ### 浏览器 ```html ``` ### 选项/ 道具 | 选项 | 默认 | 选择 | 说明 | | --- | --- | --- | --- | | **数据** | `{}` | | 用于拾取器的数据 | | **i18n (英语)** | `{}` | | 用于拾取器的本地化数据 | | **类别** | `[]` | `frequent`, (中文(简体) ), `people`, (中文(简体) ), `nature`, (中文(简体) ), `foods`, (中文(简体) ), `activity`, (中文(简体) ), `places`, (中文(简体) ), `objects`, (中文(简体) ), `symbols`, (中文(简体) ), `flags` | 选取器要显示的类别 。 秩序受到尊重. | | **自定义** | `[]` | | [自定义emojis](https://npmcn.com/package/%40fantasticmrdavid/emoji-mart/#readme-custom-emojis) | | **在Emoji上选择** | `null` | | 选择了 emoji 后召回 | | **在外边** | `null` | | 在拾取器外点击时回击 | | **关于Add.Custom Emoji的报告** | `null` | | 调用时 _添加自定义的emoji_ 按钮。 只有提供回调时才会显示按钮 。 当搜索返回无结果时显示它 . | | **自动聚焦** | `false` | | 拾取器是否应当自动聚焦搜索输入 | | **类别** | `{}` | | [自定义类别图标](https://npmcn.com/package/%40fantasticmrdavid/emoji-mart/#readme-custom-category-icons) | | **动态窗口** | `false` | | 采取器是否应该计算 `perLine` 动态基于 ``。启用时, `perLine` 被忽略 | | **emoji按钮颜色** | `[]` | 即说. `#f00`, (中文(简体) ), `pink`, (中文(简体) ), `rgba(155,223,88,.7)` | 影响徘徊背景颜色的颜色阵列 | | **emoji按钮拉迪乌斯** | `100%` | 即说. `6px`, (中文(简体) ), `1em`, (中文(简体) ), `100%` | 情感按钮的半径 | | **emoji 按钮大小** | `36` | | Emoji 按钮的大小 | | **电子化** | `24` | | Emojis的大小( 在按钮内) | | **emojiVersion 语录** | `14` | `1`, (中文(简体) ), `2`, (中文(简体) ), `3`, (中文(简体) ), `4`, (中文(简体) ), `5`, (中文(简体) ), `11`, (中文(简体) ), `12`, (中文(简体) ), `12.1`, (中文(简体) ), `13`, (中文(简体) ), `13.1`, (中文(简体) ), `14` | 要使用的emoji数据版本. 最新版本支持于 `@emoji-mart/data` 当前 [页:1](https://emojipedia.org/emoji-14.0) | | **除了爱莫吉斯** | `[]` | | 将从拾取器中删除的 emoji ID 列表 | | **图标** | `auto` | `auto`, (中文(简体) ), `outline`, (中文(简体) ), `solid` | 用于拾取器的图标类型 . `outline` 带有轻主题和 `solid` 黑暗主题. | | **语言** | `en` | `en`, (中文(简体) ), `ar`, (中文(简体) ), `be`, (中文(简体) ), `cs`, (中文(简体) ), `de`, (中文(简体) ), `es`, (中文(简体) ), `fa`, (中文(简体) ), `fi`, (中文(简体) ), `fr`, (中文(简体) ), `hi`, (中文(简体) ), `it`, (中文(简体) ), `ja`, (中文(简体) ), `kr`, (中文(简体) ), `nl`, (中文(简体) ), `pl`, (中文(简体) ), `pt`, (中文(简体) ), `ru`, (中文(简体) ), `sa`, (中文(简体) ), `tr`, (中文(简体) ), `uk`, (中文(简体) ), `vi`, (中文(简体) ), `zh` | 拾取器使用的地方 | | **最大频率** | `4` | | 显示的频率行数 . `0` 将禁用频繁的分类 | | **导航** | `top` | `top`, (中文(简体) ), `bottom`, (中文(简体) ), `none` | 导航栏的位置 | | **无国家标记** | `false` | | 是否显示国家旗帜 。 如果不提供, tbhis 会被自动处理( Windows 不支持国家旗帜) | | **没有结果 Emoji** | `cry` | | 爱莫吉的ID 用于无结果的爱莫吉 | | **每行数** | `9` | | 每行要显示的情感数量 | | **预览 Emoji** | `point_up` | | 在不徘徊任何emoji时用于预览的emoji的ID. `point_up` 当预览位置为下方时 `point_down` 当预览位置为上. | | **预览方案** | `bottom` | `top`, (中文(简体) ), `bottom`, (中文(简体) ), `none` | 预览的位置 | | **搜索选项** | `sticky` | `sticky`, (中文(简体) ), `static`, (中文(简体) ), `none` | 搜索输入的位置 | | **设定** | `native` | `native`, (中文(简体) ), `apple`, (中文(简体) ), `facebook`, (中文(简体) ), `google`, (中文(简体) ), `twitter` | 取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取用取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取用取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取. `native` 作为表现最出色的人,其他人则依赖于图示表. | | **皮肤** | `1` | `1`, (中文(简体) ), `2`, (中文(简体) ), `3`, (中文(简体) ), `4`, (中文(简体) ), `5`, (中文(简体) ), `6` | 爱莫吉斯的皮肤色调 | | **外观** | `preview` | `preview`, (中文(简体) ), `search`, (中文(简体) ), `none` | 皮肤色调选择器的位置 | | **主题** | `auto` | `auto`, (中文(简体) ), `light`, (中文(简体) ), `dark` | 拾取器的颜色主题 | | **获取 SpritesheetURL 数据** | `null` | | 返回图示表的 URL 用于拾取器的函数 。 它应与所提供的数据相容. | ### 自定义emojis 您可以使用自定义的emojis,提供一系列分类及其emojis. Emojis还支持多张皮肤色素,可以是GIFs或SVGs. ```js 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 ( ) } ``` ### 自定义类别图标 您可以使用自定义类别图标, 将类别名称作为密钥提供对象, 将图标作为值 。 目前支持的格式 `svg` 字符串和 `src`。见 [实例](https://missiveapp.com/open/emoji-mart/example-categories.html)。 。 。 . ```js const customCategoryIcons = { categoryIcons: { activity: { svg: '', }, people: { src: './people.png', }, }, } ``` ## Emoji组件 Emoji网络组件的用法无论您使用什么库都是一样的. 首先,您需要确保数据已经初始化 。 您只需每页装入一次即可 。 注意,如果你打电话 `init` 这样,你不一定需要将数据纳入你的道具中。 也没什么伤害. ```js import data from '@emoji-mart/data' import { init } from 'emoji-mart' init({ data }) ``` 然后可以使用您 HTML / JSX 中的 emoji 组件. ```html ``` ### 属性/ 道具 | 属性 | 示例 | 说明 | | --- | --- | --- | | **编号** | `+1` | 一个EmojiID | | **短码** | `:+1::skin-tone-2:` | Emoji 短码 | | **本地语言** | `👍` | 一个本土的情感 | | **大小** | `2em` | 内置元素大小 | | **倒计时** | `:shrug:` | 无法找到 emoji 的字符串 | | **设定** | `native` | Emoji套装: `native`, (中文(简体) ), `apple`, (中文(简体) ), `facebook`, (中文(简体) ), `google`, (中文(简体) ), `twitter` | | **皮肤** | `1` | 爱莫吉皮肤语气: `1`, (中文(简体) ), `2`, (中文(简体) ), `3`, (中文(简体) ), `4`, (中文(简体) ), `5`, (中文(简体) ), `6` | ## 无头搜索 你可以不用皮克来搜 就像爱莫吉一样, `data` 要使用搜索索引,需要先初始化. ```js 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 数据 . ```js 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 用户界面支持 [多种语言](https://github.com/missive/emoji-mart/tree/main/packages/emoji-mart-data/i18n)自由打开公关 如果你的失踪. ```js import i18n from '@emoji-mart/data/i18n/fr.json' i18n.search_no_results_1 = 'Aucun emoji' new Picker({ i18n }) ``` 由于文件小, 英语是内置的,不需要提供. ## 实例 - [类别](https://missiveapp.com/open/emoji-mart/example-categories.html) - [自定义 emoji 字体](https://missiveapp.com/open/emoji-mart/example-custom-font.html) - [自定义样式](https://missiveapp.com/open/emoji-mart/example-custom-styles.html) - [Emoji组件](https://missiveapp.com/open/emoji-mart/example-emoji-component.html) - [无头搜索](https://missiveapp.com/open/emoji-mart/example-headless-search.html) - [黑色颜色](https://missiveapp.com/open/emoji-mart/example-slack-colors.html) ## QQ 为现代浏览器所建 EmojiMart 依赖于这些 API, 如果您需要支持旧浏览器, 您可能需要包含多填充 : - [阴影DOM](https://caniuse.com/shadowdomv1) (单位:千美元)[MDN 数据](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)(中文(简体) ) - [自定义元素](https://caniuse.com/custom-elementsv1) (单位:千美元)[MDN 数据](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)(中文(简体) ) - [交叉观察员](https://caniuse.com/intersectionobserver) (单位:千美元)[MDN 数据](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)(中文(简体) ) - [自动/等待](https://caniuse.com/async-functions) (单位:千美元)[MDN 数据](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)(中文(简体) ) ## 发展 ```sh yarn install yarn dev ``` ## 常见问题 ### @fantasticmrdavid/emoji-mart 是什么？ 网络取相机 ### 如何安装 @fantasticmrdavid/emoji-mart？ 在项目目录运行 npm install @fantasticmrdavid/emoji-mart，或使用 pnpm add / yarn add / bun add。 ### @fantasticmrdavid/emoji-mart 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @fantasticmrdavid/emoji-mart 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @fantasticmrdavid/emoji-mart 可以商用吗？ @fantasticmrdavid/emoji-mart 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @fantasticmrdavid/emoji-mart 的下载量有多少？ 根据 npm 官方下载统计，@fantasticmrdavid/emoji-mart 在 2026/10/15 – 2026/11/13 这 30 天内被下载 28,465 次，日均约 949 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @fantasticmrdavid/emoji-mart 还在维护吗？ 最新版本 5\.5\.2-c 发布于 2023/05/31（3 年前）；至今共发布 3 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/05/26。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。