npm 包 @brigand/react-mentions 使用教程

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

前言

随着前端开发的发展,UI组件的丰富度也越来越高。在处理一些常见的UI事件时,常常需要用到一些常用的库来协助开发。在此,我们将介绍一个非常实用的 React 组件库——React Mentions,该组件库可帮助我们快速地将 mention 功能集成到项目中。下面将简单介绍该组件库的使用方法。

什么是React Mentions

React Mentions 是一个非常流行的 mention 组件库。与负责人 Matti 的一份记录相比,“Mentions” 是一种让

使用@符号来提到指定用户是有用的,例如:

  • 社交媒体页面上的评论
  • 输入电子邮件地址时提醒收件人

React Mentions 可以帮助我们创建出这种UI体验。该组件库提供了对输入区域的完全控制,同时也可以很容易地处理对API端点的调用。本文将演示如何安装和使用 React Mentions。

React Mentions 的安装和使用

安装

我们可以通过 NPM 或 Yarn 安装React Mentions

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

使用

使用 React Mentions 一般分为以下三个步骤:

1.导入相关 JS/CSS 文件
2.渲染 mentions 组件
3.处理 mentions 事件

我们在这里简单概述一下这三个步骤。

导入相关 JS/CSS 文件

这里我们使用 react 和 react-dom 展示 mentions 组件,并引入 mdi-icons 和 theme CSS 文件:

------ ------ - -------- - ---- --------
------ -------- ---- ------------
------ ------------- ---- --------------------------
------ - ---------------- - ---- ----------
------ -----------------------------------------------------
------ ---------------
渲染 mentions 组件

我们创建一个基本的展示评论、提及用户信息的 react demo。可以像下面这样创建一个 <MentionsInput>组件。组件要求至少两个参数: valueonChanges。我们需要将值和数据请求进度相结合,以保证用户输入的时间和数据请求相互独立:

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

----- ----------- - --------------------------------
-------------------- --- -------------
处理 mentions 事件

在该 demo 中,当用户点击账户名时,我们需要获取该选项的相关信息。 这里 onAdd 事件将帮助我们完成这个任务,并将所需信息传递给应用程序:

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

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

在这里,我们将 renderSuggestion 视为自定义UI,这里我们为其提供了一个简单的样式。

一个完整的示例代码可以在我的GitHub 仓库中找到。

总结

React Mentions 是一款非常实用易用的库,它可以让我们轻松地实现 mention 功能。我们可以使用该库帮助用户在输入时搜索信息,同时保证数据量不会太大。通过代码,我们展示了 React Mentions 的实际工作原理和应用场景。这将帮助初学者学习和理解 React Mentions 的使用方式。当然,自己实践将是更好地理解 React Mentions 的关键。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005638181e8991b448e1117


猜你喜欢

  • npm 包 grunt-angular-directives-in-views 使用教程

    简介 grunt-angular-directives-in-views 是一款非常实用的 npm 包,它可以帮助我们在 AngularJS 的模板中自动添加定义的指令。

    3 年前
  • npm 包 plugit-util 使用教程

    npm 包 plugit-util 是一款前端常用的工具库,提供了多种常用的函数方法,包括字符串处理、日期时间处理、类型判断、数组处理等等。在前后端开发中都有广泛的应用。

    3 年前
  • npm 包 @uandi/eslint-config-uandi 使用教程

    前言 在前端开发中,使用 ESLint 可以帮助我们保持代码质量的统一性和规范性。在实际工作中,为了避免重复造轮子,我们可以使用已经存在的配置文件。这里介绍一个使用 @uandi/eslint-con...

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

    介绍 timepack-qiniu 是一款基于 npm 包发布的前端上传文件到七牛云存储的工具。如果你正在开发一个需要文件上传功能的前端项目,那么 timepack-qiniu 可能是你需要的工具。

    3 年前
  • npm 包 n-speech 使用教程

    简介 n-speech 是一个基于 Web API SpeechRecognition 接口的 npm 包,可以用于实现前端语音识别,可以极大地方便用户的操作。本文将详细介绍如何使用该包,并提供示例代...

    3 年前
  • npm 包 @boldr/tools 使用教程

    什么是 @boldr/tools? @boldr/tools 是一个由 Boldr 团队创建和维护的前端工具库,旨在提供常用的前端开发工具和组件。 如何安装 @boldr/tools? 通过 npm ...

    3 年前
  • npm 包 dawblocks 使用教程

    DAWBlocks 是一个用于 Web 新手建立网站的 npm 包,它提供了一组易于定制和样式良好的 HTML、CSS 和 JavaScript 元素,使得 Web 开发变得更加简单。

    3 年前
  • npm 包 bubu-weex-components 使用教程

    前言 在前端的开发过程中,我们经常使用的工具就是 npm 包,可以为我们快速引入一些常用的组件和插件,以减少一些重复任务。bubu-weex-components 就是一个很好的 npm 包,它提供了...

    3 年前
  • npm 包 react-cue 使用教程

    简介 react-cue 是一款基于 React 的动画效果组件库,可以快速为 React 组件添加动画效果,丰富页面 UI 交互。 安装 使用 npm 进行安装: --- ------- -----...

    3 年前
  • npm 包 nannoq-proxies 使用教程

    nannoq-proxies 简介 nannoq-proxies 是一个基于 ES6 Proxy 的 JavaScript 库,通过对对象进行代理和拦截,实现访问控制和数据验证的功能。

    3 年前
  • npm 包 xat 使用教程

    前言 在前端开发中,我们会用到各种工具和库来提升效率、简化开发。而 npm 是一个非常重要的工具,它能让我们快速下载所需要的库或者工具,并且管理这些库的版本。 在众多的 npm 包中,xat 是一个非...

    3 年前
  • npm 包 @vcarl/tsc-watch 使用教程

    npm 包 @vcarl/tsc-watch 使用教程 介绍 npm 是一个 Node.js 包管理器,允许开发者在他们的项目中使用轻松安装、更新和卸载不同的模块。

    3 年前
  • npm 包 babel-plugin-transform-auto-export 使用教程

    在前端开发中,我们常常需要使用 Babel 来将 ES6+ 的代码转换成 ES5 以便浏览器可以理解和执行,同时我们也需要使用 npm 来引入各类第三方包。本文就来介绍一个名为 babel-plugi...

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

    简介 npm 是前端开发最常用的包管理器之一,而 generator-metalsmith-basic 是基于 Metalsmith 的一个 npm 包,用于生成基础的 Metalsmith 项目结构...

    3 年前
  • npm 包 generator-metalsmith-gitlab-pages 使用教程

    前言 在前端开发中,我们经常需要将项目发布到线上供用户使用。此时,我们需要对代码进行打包、压缩等处理,并将处理后的代码上传到服务器。如何将这一过程自动化地完成呢?npm 包 generator-met...

    3 年前
  • npm 包 hjs-io 使用教程

    在前端开发中,我们常常需要在静态页面中使用一些静态资源(如 css、js、图片等),而 hjs-io 是一个用于让我们更方便使用静态资源的 npm 包,它可以帮助我们自动打包静态资源并将其插入到页面中...

    3 年前
  • npm 包 ng-material-sidemenu 使用教程

    介绍 ng-material-sidemenu 是一个 AngularJS + Material Design 的侧边栏菜单组件,可以快速构建出漂亮的侧边栏菜单,提高用户体验。

    3 年前
  • npm 包 hjs-codec 使用教程

    什么是 hjs-codec? hjs-codec 是一个 JavaScript 库,它提供了一些编码和解码函数。它可以用于编码和解码通常用于数据交换的数据格式,如 JSON、base64 等。

    3 年前
  • npm 包 @uandi/eslint-config 使用教程

    简介 在前端开发中,编写代码是必不可少的。但是,代码的质量是否好,直接影响到程序的可维护性和扩展性。为了减少代码开发者工作量,提升代码质量和可读性,我们可以使用 eslint 这样的静态代码检查工具。

    3 年前
  • npm包webpack2-sentry-plugin使用教程

    在前端开发中,我们不免会遇到需要将代码上传到服务器上进行部署和监控的情况。而 Sentry 作为开源的异常监控平台,可以帮助我们快速发现和定位服务器上的异常问题。本文介绍如何使用npm包webpack...

    3 年前

相关推荐

    暂无文章