前言
在前端开发中，我们经常需要添加一些表情符号，以表达情感或强化用户体验。@barbuza/react-emoji-picker 是一个基于 React 的表情选择器，使用简洁、易于定制，该教程将会详细介绍它的使用。
安装
使用 npm 进行安装：
npm i @barbuza/react-emoji-picker
API
@barbuza/react-emoji-picker 提供了以下组件：
EmojiPicker：表情选择器组件。EmojiButton：触发表情选择器的按钮组件。
EmojiPicker
EmojiPicker 用于选择表情符号，并返回选中的表情符号。
Props
onSelect：当选中表情符号后的回调函数。传入的参数为选中的表情符号的符号名称。perLine：每行展示的表情符号数量。默认为 8。rows：展示的行数。默认为 6。
使用示例
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----------- - ---- ------------------------------
-------- ----- -
----- ------- --------- - -------------
-------- -------------------------------- -
------------------------
-
------ -
-----
--------------------------
------------ ---------------------------- --
------
--
-
------ ------- ----EmojiButton
EmojiButton 是用于触发表情选择器的按钮组件。在组件点击后显示表情选择器，选择表情符号后关闭表情选择器，并将选中的表情符号返回。
Props
onChange：当选中表情符号后的回调函数。传入的参数为选中的表情符号的符号名称。perLine：每行展示的表情符号数量。默认为 8。rows：展示的行数。默认为 6。
使用示例
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----------- - ---- ------------------------------
-------- ----- -
----- ------- --------- - -------------
-------- -------------------------------- -
------------------------
-
------ -
-----
--------------------------
------------ -------------------------------------------------
------
--
-
------ ------- ----自定义表情符号
@barbuza/react-emoji-picker 默认提供了一组常见的表情符号，但这不一定满足我们的需求。我们可以通过传入自定义表情符号数组实现自定义表情符号。
表情符号数组格式为：
-- -------------------- ---- -------
-
-
----- ---------
------- ---------
------ -------------
--------- -------------
------ - -- ---------------------
--
-- ---
-使用示例
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----------- - ---- ------------------------------
----- ------------ - -
-
----- ------ ---
------- ----
--
-
----- ------ ---
------- ----
-
--
-------- ----- -
----- ------- --------- - -------------
-------- -------------------------------- -
------------------------
-
------ -
-----
--------------------------
------------ ---------------------------- --------------------- --
------
--
-
------ ------- ----结语
@barbuza/react-emoji-picker 是一个开源的 React 表情选择器组件，无论是在 showToast 还是舖平表情图集上都可以使用。通过本文的介绍，相信大家对于该组件的使用已经掌握了。如果有问题欢迎留言讨论，谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005587481e8991b448d5afc