npm 包 react-githubish-mentions-nick 使用教程

介绍

react-githubish-mentions-nick 是一个基于 React 的 npm 包，用来实现类似 Github 的 @ 提到用户的功能。该包通过对用户输入的内容进行解析，找到符合特定格式的字符串，再通过自定义组件进行替换，最终呈现出可点击的用户信息。

安装

在使用 react-githubish-mentions-nick 之前，需要先进行安装。

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

使用

引入

安装完成后，在需要使用该组件的文件中引入：

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

简单用法

假设你想在一个文本框内实现 @ 提到用户的功能，可以使用以下代码：

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

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

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

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

在上面的代码中，value 和 onChange 是必要的两个 props。其中，value 用来表示文本框的值，onChange 用来处理文本框值的变化。此外，还需要通过 trigger 和 users 来配置触发字符和用户列表。

自定义渲染组件

如果要对用户信息进行自定义样式和结构的渲染，需要使用 renderUser 属性来返回子组件。例如，如下代码中，我们将用户列表进行样式化、添加头像等操作：

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

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

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

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

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

在上面的代码中，我们通过 renderUser 属性来自定义用户信息的渲染方式，返回一个自定义组件即可。

总结

通过本文，我们了解了 npm 包 react-githubish-mentions-nick 的使用方法，包括安装、引入、基本用法和自定义组件渲染。这个包可以帮助我们方便地实现类似 Github 的 @ 提到用户的功能，同时也可以灵活地自定义样式和结构。如果你对实现类似功能的技术感兴趣，这个包值得一试。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005725781e8991b448e870c

阅读全文

猜你喜欢

  • npm 包 react-typeout 使用教程

    在前端开发中，React 成为了一种非常流行的框架，而 npm 包可以让我们在项目开发中更方便的使用 React 等库。本文将介绍一个非常有用的 npm 包：react-typeout，它提供了一种逐...

    3 年前
  • npm 包 soracom_api 使用教程

    介绍 Soracom 是一个 IoT 通信平台，它提供了一系列的 API，用来管理设备，发送和接收数据等。soracom_api 是一个 Node.js 的 npm 包，它提供了一个简单、易用的 AP...

    3 年前
  • npm 包 waterline-sqlite3-es5 使用教程

    在前端开发中，数据库操作是少不了的一环。而 Node.js 的流行让我们可以使用一些优秀的数据库库来完成我们的工作。waterline-sqlite3-es5 就是其中之一，它是一个基于 waterl...

    3 年前
  • npm 包 generator-vueui 使用教程

    简介 在前端开发过程中，我们开发各种不同的应用都需要用到 UI 库和框架，如 Vue.js、React、Angular 等。而这些应用中常常会用到多个第三方库，如果都手动搭建，会浪费大量时间。

    3 年前
  • npm 包 fun-curry 使用教程

    fun-curry 是一个用于实现 JavaScript 函数式编程中函数柯里化的 npm 包。它使用简单，可以大大提高代码的可读性和重用性，是前端开发中不可缺少的工具之一。

    3 年前
  • NPM 包 Meepo-store 使用教程

    在前端开发中，我们经常需要管理和共享各种资源和数据，而 Meepo-store 就是一个帮助我们实现数据管理和存储的 NPM 包。这篇文章将使用详细的步骤和示例代码，为大家介绍如何使用 Meepo-s...

    3 年前
  • npm 包 canonical-craigslist-url 使用教程

    craigslist 是一个非常受欢迎的在线市场，用于买卖各种物品和服务。随着 craigslist 的普及，很多网站都开始使用它提供的 API 来与其进行集成。然而，一个常见的问题是 craigsl...

    3 年前
  • npm 包 @arist0tl3/mongodb-download 使用教程

    MongoDB 是一种非常流行的 NoSQL 数据库，node.js 社区也开发了一系列便捷的 MongoDB 驱动模块，比如 mongoose 等，可以大大提高开发效率。

    3 年前
  • npm包 time-between-dates 使用教程

    前言 在前端开发中，我们常常需要计算时间上的差异，例如计算两个日期之间的天数、小时数、分钟数等等。而其中一个便是计算两个日期之间的时间差。为了方便我们进行这样的计算，有开发者将其封装为 npm 包，名...

    3 年前
  • npm包throttle-frequency使用教程

    在前端开发中，当用户频繁地操作某个按钮、滚动页面或者输入框进行输入时，可能会导致频繁地执行某些函数，从而降低页面性能。为了避免这种情况的发生，我们可以使用npm包throttle-frequency来...

    3 年前
  • npm 包 react-native-flatlist-with-end 使用教程

    简介 react-native-flatlist-with-end 是一个 React Native 库，它可以帮助我们开发基于 FlatList 的列表，支持自定义加载更多界面，在列表末尾添加任意组...

    3 年前
  • npm 包 @svrathore/aws-lib 使用教程

    一、前言 随着云计算的发展，越来越多的公司将应用程序部署到云端。AWS（Amazon Web Services）是云服务提供商中的佼佼者之一。AWS 提供了很多可以帮助开发人员构建和部署应用程序的工具...

    3 年前
  • npm 包 cordova-plugin-farzad-intent 使用教程

    简介 cordova-plugin-farzad-intent 是一个 Cordova 插件，用于在 Android 平台上启动其它应用。该插件可以启动另一个应用程序，并传递数据。

    3 年前
  • npm 包 @chrisaguilar/pword 使用教程

    简介 @chrisaguilar/pword 是一个用于生成随机密码的 npm 包，它可以让你轻松地生成密码，而无需自己写随机密码生成函数。它的另一个优点是，生成的密码可以根据你的需求，自定义长度和复...

    3 年前
  • npm 包 jzflow 使用教程

    在前端开发中，我们经常需要处理数据流程和逻辑判断等一系列的复杂问题。而 jzflow 是一个基于 Node.js 开发的 npm 包，旨在提供一种简单、易用的流程控制工具，以便更加高效地进行数据处理。

    3 年前
  • npm 包 hexo-qiniu-sync2 使用教程

    介绍 hexo-qiniu-sync2 是一个将 Hexo 博客静态文件同步到七牛云存储平台的 npm 包，能够帮助博客作者快速方便地将生成的静态文件上传到七牛 CDN，使得博客访问速度更快更稳定。

    3 年前
  • npm 包 parse-dep-weexunify 使用教程

    前言 在前端开发中，我们通常会使用许多库和框架，这些库和框架之间的依赖关系是非常复杂的。在管理这些依赖关系时，我们需要一些工具来帮助我们进行处理。 在本文中，我们将介绍一款名为 parse-dep-w...

    3 年前
  • npm 包 cordova-plugin-webviewselector 使用教程

    在移动端开发中，WebView 是应用程序中展示网页的常用组件。然而，不同的移动设备厂商提供的 WebView 实现各不相同，有些甚至存在一些兼容性问题，给前端开发带来了不少困扰。

    3 年前
  • npm 包 @bouzuya/screenshot-testing 使用教程

    前言 前端开发中，我们经常需要进行界面测试。界面测试通常是手工完成的，这需要大量的人力和时间。在一些重复性比较高的场景下，使用自动化测试是非常有优势的。本文将介绍一种简单易用的自动化测试工具——@bo...

    3 年前
  • npm 包 biblion 使用教程

    在前端开发过程中，我们经常需要引用各种第三方库，以提高我们的开发效率。npm 是目前最流行的 Node.js 包管理器，也是前端开发中必不可少的工具之一。在 npm 中，开发者可以下载各种第三方包并轻...

    3 年前

相关推荐

    暂无文章