npm 包 react-popperjs 使用教程

介绍

react-popperjs 是一个针对 React 应用的高度可定制化的弹出式组件库，它基于 Popper.js 开发而来，依赖于 React 和 Popper.js，并提供有用而灵活的 API。

安装

使用 npm 安装：

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

使用

基本示例

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

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

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

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

使用 usePopper 将一个 reference 元素和一个 popper 元素连接起来，得到计算出的样式和属性，并在 <Overlay> 组件中渲染 popper 元素。

API

usePopper

usePopper 是一个 hooks 函数，它接受三个参数：

  • referenceElement，类型为 HTMLElement | null | undefined，指定 popper 的参考元素。

  • popperElement，类型为 HTMLElement | null | undefined，指定要弹出的元素。

  • options，类型为 Options，是一个可选的配置对象，可以包括以下属性：

    • placement，类型为 Placement，指定定位方向，默认值为 bottom。
    • strategy，类型为 PositioningStrategy，指定定位策略，默认值为 absolute。
    • modifiers，类型为 Modifier[]，是一组用于优化和调整定位的配置对象。

usePopper 返回一个对象，包括以下属性：

  • styles，类型为 CSSProperties，包括计算出的样式。
  • attributes，类型为 Attributes，包括计算出的属性，用于向下传递。

Overlay

<Overlay> 是一个 React 组件，它作为一个容器，用于渲染要弹出的元素。它接收以下属性：

  • show，类型为 boolean，指定是否显示弹出的元素。
  • className，类型为 string，指定容器元素的类名。
  • as，类型为 ElementType，指定容器元素的类型，默认为 div。
  • children，类型为 ReactNode，指定要弹出的元素。

此外，还支持 JSX 封装：

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

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

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

overrideOverlay

overrideOverlay 是一个函数，它接收一个配置对象，用于覆盖 <Overlay> 组件的默认属性和样式，并返回一个新的组件。

示例

嵌套菜单

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

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

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

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

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

自定义箭头

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

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

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

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

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

结论

在本文中，我们讲解了 react-popperjs 的使用方法，包括基本示例、API 和示例，希望能对广大前端工程师有所帮助。如果你正在寻找一种可定制化的弹出式组件库，建议使用 react-popperjs。

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

阅读全文

猜你喜欢

  • npm 包 aws-cloudwatch-monitor 使用教程

    简介 AWS CloudWatch 是 Amazon Web Services 的监控服务，可用于监控 AWS 资源和应用程序以及自定义指标。aws-cloudwatch-monitor 是一个 np...

    2 年前
  • npm 包 eslint-plugin-xod-fp 使用教程

    引言 在前端开发中，代码规范的重要性不言而喻。为了方便规范代码，我们会使用自动检查工具来自动化检查代码是否符合规范，其中 eslint 是大多数开发者选择的工具之一。

    2 年前
  • npm 包 plain-hamming 使用教程

    本文将为大家介绍一款 npm 包——plain-hamming 的使用教程。在介绍如何使用这个包之前，先让我们来了解一下什么是汉明距离。 汉明距离 汉明距离是指在相同长度的两个字符串之间，对应位置不同...

    2 年前
  • npm 包 ns-sweet-alert 使用教程

    在前端开发中，我们经常需要使用弹窗来向用户展示信息或提示操作，而 sweetAlert 就是一款优秀的弹窗插件，其简洁、漂亮、可定制的特点深受开发者喜爱。而 ns-sweet-alert 就是基于 s...

    2 年前
  • npm 包 create-redux-reducer 使用教程

    在前端开发中，我们经常会使用 Redux 作为状态管理工具来帮助我们更好地管理应用程序中的状态。而在使用 Redux 的过程中，我们又要频繁地创建 reducer 函数来对应各种不同的状态操作。

    2 年前
  • npm 包 node-randomize 使用教程

    在前端开发中，有时候我们需要生成随机数等随机值，这就需要用到 npm 包中的 node-randomize。它是一个轻量级的 JavaScript 库，可以在 Node.js 以及浏览器环境中使用。

    2 年前
  • npm 包 @kenguru33/json-fetcher 使用教程

    前言 @kenguru33/json-fetcher 是一款使用简单的 npm 包，可用于前端项目中进行数据请求和处理。其核心功能为向后端服务器发送请求，并返回 JSON 数据，简化了前端开发中复杂、...

    2 年前
  • npm包 simple-auth-client 使用教程

    在现代化的 Web 应用开发中，安全认证是必不可少的。simple-auth-client 是一款以 OAuth2 协议为基础，提供简单而强大的用户授权认证机制的 npm 包。

    2 年前
  • npm 包 generator-react-modules 使用教程

    什么是 generator-react-modules? generator-react-modules 是一个基于 yeoman 开发的 npm 包，用于快速初始化一个 React 组件库脚手架。

    2 年前
  • npm 包 minimat-graph 使用教程

    简介 minimat-graph 是一个用于可视化数据的 npm 包，它提供了便捷的绘图工具，使得开发者可以更加方便地处理数据，可用于各种数据可视化场景，例如图表、统计报表、数据监控等。

    2 年前
  • npm 包 rollup-starter 使用教程

    1. 背景 在前端开发中，我们通常需要将多个 JavaScript 模块打包成一个文件，以提高页面的加载速度和性能。而 Rollup 是一个 JavaScript 模块打包工具，可以将多个 JavaS...

    2 年前
  • npm 包 random-things 使用教程

    在前端开发中，常常需要使用到各种随机数和随机字符串。手写这些代码虽然不难，但是会稍稍浪费时间和精力。此时，一个功能完善的 npm 包就能够解决这个问题。本篇文章将介绍一个 npm 包 —— rando...

    2 年前
  • npm 包 nightshirt 使用教程

    什么是 nightshirt nightshirt 是一个基于 Vue.js 的 UI 组件库，主要用于快速搭建前端界面和交互。它支持按需引入和自定义主题，同时附带了一些常用的工具类和常量，可以大大提...

    2 年前
  • npm 包 practical 使用教程

    在前端开发的过程中，我们经常需要使用一些 npm 包来帮助我们解决问题。practical 就是一款非常实用的 npm 包，它提供了许多常用的工具函数，可以简化我们的开发流程，让我们更加高效地完成工作...

    2 年前
  • npm 包 date-format-utils 使用教程

    在前端开发中，时间的格式化是一个常见的需求。而使用 npm 包 date-format-utils 可以方便、快速地完成时间格式化的任务。 本文将详细介绍 date-format-utils 的使用方...

    2 年前
  • npm 包 reactjs-spinner 使用教程

    ReactJS Spinner 是一个适用于 React 应用程序的小巧、漂亮、高度可定制的加载指示器组件。这个组件可以非常方便地帮助开发者高效完成整个加载过程，让用户在等待过程中获取友好的提示。

    2 年前
  • npm 包 352-fabric 使用教程

    介绍 在前端开发中，经常需要处理画布上的图形，而 fabric.js 是一个强大的图形处理库，可以处理多种类型的图形，支持高级特性如变换、动画、选择等等。但是，使用 fabric.js 进行图形处理时...

    2 年前
  • npm 包 ng2-ladda-preloader 使用教程

    前言 在前端开发中，我们经常需要为页面添加各式各样的按钮，但是在实际使用过程中，经常会遇到一些问题，比如按钮操作过程中可能会出现卡顿甚至无响应，但是又不能在操作过程中直接禁用按钮，因为这样会给用户带来...

    2 年前
  • npm 包 cerebro-caniuse 使用教程

    当我们开发网页时，我们通常会使用一些新的 CSS 和 JavaScript 特性。但是这些特性并不一定适用于每个浏览器。如果我们不想让我们的网页在某些浏览器中崩溃，我们需要检查我们使用的特性是否受当前...

    2 年前
  • npm 包 babel-plugin-transform-react-native-style-optimizer 使用教程

    介绍 babel-plugin-transform-react-native-style-optimizer 是一个可优化 React Native 样式表的 Babel 插件。

    2 年前

相关推荐

    暂无文章