介绍
react-popperjs 是一个针对 React 应用的高度可定制化的弹出式组件库，它基于 Popper.js 开发而来，依赖于 React 和 Popper.js，并提供有用而灵活的 API。
安装
使用 npm 安装：
npm install react-popperjs
使用
基本示例
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- --------- - ---- -----------------
-------- ------------- -
----- ----------- ------------- - ----------------------
----- ------------------ -------------------- - -----------------
----- --------------- ----------------- - -----------------
----- - ------- ---------- - - --------------------------- -------------- -
---------- ---------------
---
------ -
--
------- ------------------------- ----------- -- --------------------------
------
---------
---------- -- -
--------
--------------------
----------------------
---------------------
----------------------
-
------
----------
--
---
--
-使用 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
