npm 包 @barbuza/react-emoji-picker 使用教程

前言

在前端开发中，我们经常需要添加一些表情符号，以表达情感或强化用户体验。@barbuza/react-emoji-picker 是一个基于 React 的表情选择器，使用简洁、易于定制，该教程将会详细介绍它的使用。

安装

使用 npm 进行安装：

--- - ---------------------------

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

阅读全文

猜你喜欢

  • npm 包 naivefp 使用教程

    简介 naivefp 是一个非常实用的 npm 包，它可以帮助前端开发者便捷地实现函数式编程。函数式编程是一种思想，它可以帮助我们更好地组织代码，提高代码的可读性和可维护性。

    2 年前
  • npm 包 css-loader-dashed-class-names 使用教程

    介绍 在前端开发中，我们经常会使用 webpack 来构建应用程序。而在使用 webpack 构建应用程序时，要经常使用一些 css 相关的 loader。其中，一个非常实用的 loader 就是 c...

    2 年前
  • npm包ts-repl使用教程

    前言 在前端开发中，TypeScript已经成为了很多人的首选语言。不仅如此，TypeScript也在逐渐地成为了Node.js的标准。今天我要介绍的是一个 npm 包 —— ts-repl。

    2 年前
  • npm 包 encryptutils 使用教程

    前言 在现代的网络环境中，保护数据的安全性显得尤为重要。加密是一种基本的保护数据安全性的方法。在前端开发中，我们经常需要对数据进行加密。npm 包 encryptutils 就是一种非常实用的加密工具...

    2 年前
  • npm 包 nativescript-bcryptjs 使用教程

    介绍 本文将详细介绍如何在前端开发过程中使用 npm 包 nativescript-bcryptjs，它是一款用于在 NativeScript 中实现 bcrypt 加密算法的插件。

    2 年前
  • npm 包 xunmo 使用教程

    npm 是 Node.js 包管理器，开发人员通过 npm 可以轻松地安装、更新和管理自己的 JavaScript 包。xunmo 是一款基于 React 的组件库，提供了丰富多样的 UI 组件，方便...

    2 年前
  • npm 包 vue2-tap 使用教程

    前言 随着 Vue2 的逐渐普及，开发人员对于 Vue 的掌握程度也越来越高，我们也能够更好的发挥 Vue 的优势。但是，与此同时，我们也面临着越来越多的开发难题，为了解决这些难题，我们需要运用一些实...

    2 年前
  • npm 包 better-unoconv 使用教程

    简介 在前端开发过程中，有时需要将文档格式转换，此时 unoconv 可以提供帮助。better-unoconv 是基于 unoconv 封装而来的 npm 包，使用更加简便。

    2 年前
  • npm 包 @cpsubrian/babel-plugin-module-resolver 使用教程

    在前端开发中，我们经常会使用到 npm 包来管理项目依赖和优化开发流程。其中，@cpsubrian/babel-plugin-module-resolver 是一个实用的 npm 包，能够提供非常方便...

    2 年前
  • npm 包 localcast-cli 使用教程

    前言 在日常开发中，难免会遇到需要将本地的网站或者界面进行投屏或者投射的需求，这就需要我们使用一些工具来实现，而 localcast-cli 就是一款可以跨平台进行 Wi-Fi 投屏的 npm 包。

    2 年前
  • npm 包 path-insert 使用教程

    在前端开发中，处理路径是非常常见的工作，但在实践中，我们常常需要动态地修改或添加路径。为了更加高效地处理路径，我们可以使用一个名为 path-insert 的 npm 包。

    2 年前
  • npm包angular_persistence使用教程

    介绍 angular_persistence是一个基于Angular框架的数据持久化库，可以帮助我们更方便地存储和获取数据，同时保证数据的安全性。它使用HTML5 LocalStorage作为存储介质...

    2 年前
  • npm包bootstrap-persian-datetimepicker使用教程

    在前端开发中，日期时间选择器在各种场景下都非常重要，因此许多前端框架和类库都提供了日期时间选择器的组件。在这里，我们将介绍npm包bootstrap-persian-datetimepicker，这是...

    2 年前
  • npm 包 cfetch 使用教程

    前言 前端开发中，异步数据请求是必备的技术。作为一名前端工程师，我们需要掌握各种异步请求的方式，以满足不同场景的需求。在众多的异步请求方法中，fetch 已成为了一种广泛使用的方式，它为我们提供了一种...

    2 年前
  • npm 包 load-google-api 使用教程

    前言 在开发前端项目时，有时需要使用 Google API 来获取数据或进行其他操作。但是，如果直接在代码中使用原生 Google API，可能会有一些麻烦和不便。

    2 年前
  • npm 包 neat-class-generator 使用教程

    在前端开发中，我们经常会写各种千奇百怪的样式表。但是，随着项目的日益庞大，样式表也变得越来越臃肿。为了应对这个问题，我们可以利用 BEM 等命名规范来规范我们的样式表。

    2 年前
  • npm 包 fmpl 使用教程

    前言 在前端开发中，我们常常需要处理字符串模板，尤其是在前端渲染页面的时候。为了提高开发效率，我们可以使用 npm 上的包来帮助我们快速地处理字符串模板。fmpl 就是一个这样的 npm 包。

    2 年前
  • npm 包 kik-it 使用教程

    前言 在前端开发的过程中，我们经常需要使用 npm 包来帮助我们完成一些复杂的任务。在这些 npm 包中，有一个叫做 kik-it 的包，它能够帮助我们快速构建可定制化的翻译组件。

    2 年前
  • npm 包 ucipass-directory 使用教程

    在前端开发中，经常会使用 npm 包管理工具来引入依赖库。而 ucipass-directory 是一款用于处理 UCI (Unified Communication Infrastructure) ...

    2 年前
  • npm包：react-better-calendar使用教程

    概述 react-better-calendar是一个基于React的日历组件，用于快速构建日历应用程序。它包含了一些通用的控制逻辑，可以快速自定义样式和设置。 安装 通过npm安装： --- ---...

    2 年前

相关推荐

    暂无文章