简介
@thijs-development/emojipicker 是一个开源的 npm 包，用于在前端应用中实现表情选择器的功能。它基于 React 开发，可自定义样式和自定义表情资源，同时支持 high dpi 已经移动设备。
安装
安装 @thijs-development/emojipicker，可以使用 npm 或者 yarn：
npm install @thijs-development/emojipicker
或者
yarn add @thijs-development/emojipicker
使用
使用 @thijs-development/emojipicker，首先需要将它引入到项目中：
import EmojiPicker from '@thijs-development/emojipicker';
基本使用
@thijs-development/emojipicker 的最基本使用方法如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ----------- ---- ---------------------------------
-------- ----- -
----- --------------- - ------- -- ---------------- -------- ----- -----------
------ -
-----
--------- ------ ---------
------------ --------------------------------- --
------
--
-
-------------------- --- ---------------------------------以上代码创建了一个简单的页面，页面上包含一个 EmojiPicker 控件。当用户点击 EmojiPicker 中的一个表情时，将会调用 onEmojiSelected 回调函数，打印所选表情的名称。
自定义表情资源
@thijs-development/emojipicker 默认提供了一组表情资源，如果需要使用其他表情资源，可以通过 props.customEmojiData 来自定义表情数据。表情数据的格式如下：
{
"key": "smile",
"imageUrl": "https://example.com/smile.png",
"char": "😀"
}其中，key 是表情的唯一标识符，imageUrl 是表情图片的地址，char 是表情对应的字符。可以通过下面的方式来使用自定义表情资源：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ----------- ---- ---------------------------------
----- --------------- - -
-
---- -------
--------- ----------------------------------
----- ----
--
-
---- -----------
--------- ----------------------------------
----- -------
--
--
-------- ----- -
----- --------------- - ------- -- ---------------- -------- ----- -----------
------ -
-----
--------- ------ ---------
------------ --------------------------------- --------------------------------- --
------
--
-
-------------------- --- ---------------------------------自定义样式
可以使用 CSS 来自定义 EmojiPicker 的样式，具体方式如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ----------- ---- ---------------------------------
------ --------------
-------- ----- -
----- --------------- - ------- -- ---------------- -------- ----- -----------
------ -
-----
--------- ------ ---------
------------ --------------------------------- --
------
--
-
-------------------- --- ---------------------------------其中 style.css 文件中的 CSS 规则将会应用到 EmojiPicker 控件中。
总结
@thijs-development/emojipicker 提供了一种简单方便的方式来实现表情选择器的功能，同时可以自定义表情资源和样式，支持高清屏幕和移动设备。希望这篇文章能够帮助你快速上手使用该库，从而为你的前端开发工作带来便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d730d0927023822d50