前言
在前端开发中，展示表情图标是一项常用的业务需求。而实现这个需求最常见的方式就是利用现成的表情包库。
在这篇文章中，我们将介绍 @luchanso/emoji-mart 这个 npm 包的使用方法，通过使用这个包，我们能够方便地在前端中展示各种表情图标。
简介
@luchanso/emoji-mart 这个 npm 包是一个集成了多种不同表情包的库。该包提供了一系列 API，使得我们可以轻松地集成并使用这些表情图标。
这里列出了一些 @luchanso/emoji-mart 的特性：
- 包含各种表情包，如：Apple、Facebook、Google、Twitter 等等
- 支持分类、搜索等功能
- 支持渲染自定义表情包
安装
安装 @luchanso/emoji-mart 包的方法很简单，可以直接通过 npm 进行安装：
npm install @luchanso/emoji-mart --save
基础使用
使用 @luchanso/emoji-mart 包展示表情图标的最简单方法，就是通过 <Picker /> 和 <Emoji /> 这两个组件。
这里是一个简单的例子，在这个例子中，我们将渲染一个表情选择器，并当用户选择某一个表情图标时，在下面显示选中的表情和其对应的 name。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --------------------------------
------ - ------- ----- - ---- -------------
------ ------- -------- ------------- -
----- ------- --------- - ---------------
----- ----------------- - ------- -- -
----------------
--
------ -
-----
------- ---------------------------- --
------ -- -
-----
------ ---------------- --------- --
-------------------------
------
--
------
--
-可以看到，要使用 @luchanso/emoji-mart 包为我们提供的表情选择器，我们只需要在组件中引入 <Picker> 组件，并实现 onSelect 方法即可。
在上面的例子中，我们通过 useState 来记录用户选择的表情，并使用 <Emoji> 组件在界面上展示选中的表情和它的 name。
高级用法
@luchanso/emoji-mart 的高级用法主要是通过 API 实现的自定义表情包和自定义表情选择器。
自定义表情包
除了默认提供的表情包外，@luchanso/emoji-mart 还允许我们将自己的表情包进行添加和渲染。下面是一个简单的例子，其中我们将添加自定义的表情包。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --------------------------------
------ - ----- - ---- -------------
------ - ------------ - ---- -----------------------
----- ------------ - -
-
--- ---------------
----- ------- -------
------- -----------------
---------- ---
------- -----
--------- -------------------------------------------
--
--
------ ------- -------- -------------- -
----- ------- --------- - ---------------
----- ----------------- - ------- -- -
----------------
--
------ -
-----
-------------
---------------------
------------- -------
----------------------------
--
------ -- -
-----
------ ---------------- --------- --
-------------------------
------
--
------
--
-在上面的示例中，我们定义了一个 customEmojis 数组，其中包含了我们自己定义的表情。我们可以在 NimblePicker 组件的 emojis 属性中传入该数组来渲染自定义表情包。
自定义表情选择器
如果默认的表情选择器不能完全满足你的要求，你还可以通过调用 API 来创建自己的表情选择器。
下面是一个简单的例子，在这个例子中，我们自定义了表情选择器的按钮：
-- -------------------- ---- -------
------ ------ - ------- -------- - ---- --------
------ --------------------------------
------ - ----------------- ------------ - ---- -------------
------ - ------- ------- - ---- -------
------ ------- -------- ------------------- -
----- --------- ----------- - ----------------
----- ---------- - ---------
----- - ------ - - ---------------
----- --------------- ----------------- - ------------
----- ----------------- - ------- -- -
------------------------
-----------------
--
----- ----------------- - ------- -- -
-------------------
--
------ -
-----
------- --------------------------- -----------------
----------------------------
---------
--------
-----------------
----------------------------
--------------------- -- -------------------
---------
-----------------
--------------------------------
---------------------------
--
-
-----------
------
--
-在上面的代码中，我们使用 useRef 来引用 Button 组件，并在 Popover 中将其传递给 getPopupContainer 属性，使得弹出框能够在 Button 组件的正下方弹出。
对于 NimbleEmojiIndex 组件，我们只传入了一个表情包，这是因为我们只想要这个选择器渲染一个表情包。当然，如果你有多个表情包需要渲染，你也可以传入一个包含多个表情包的数组。
当用户选择一个表情时，handleEmojiSelect 方法将会被触发。
结论
通过本文，我们了解了 @luchanso/emoji-mart 这个 npm 包的基本用法和高级用法。通过使用这个包，我们可以在前端中很方便地展示各种表情图标，并支持自定义表情包和选择器，为我们的业务需求提供了很大的便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005615281e8991b448df429