在现代 Web 开发中，很多网站或应用程序都需要展示高质量、动态的加载状态。在这种情况下，@jameskraus/react-loading-overlay 是一个很好用的 npm 包，可以帮助你轻松地在 React 应用中创建加载中的遮罩层。
安装
使用 npm 安装 @jameskraus/react-loading-overlay：
npm install @jameskraus/react-loading-overlay
使用方法
最基本的用法
在应用中使用 @jameskraus/react-loading-overlay，你需要从这个包中导入一个 LoadingOverlay 组件：
import LoadingOverlay from "@jameskraus/react-loading-overlay";
// 在组件中使用 LoadingOverlay：
<LoadingOverlay active={true} />React Loading Overlay 的 active 属性接受一个布尔值，用于显示或隐藏 Loading Overlay。以上示例中的 “true” 表示正在显示 loading overlay。
自定义样式
React Loading Overlay 也提供了很多自定义选项，可以使加载状态的遮罩层看起来更符合你的程序的设计：
<LoadingOverlay
active={true}
spinner
text="页面加载中，请稍候……"
styles={{ wrapper: { color: "red" } }}
/>在这个样例中，我们用 spinner 选项添加一个加载状态的旋转器，添加了一个显示 "页面加载中，请稍候……" 的文本，以及自定义了加载遮罩层的包裹层样式。
更多选项
除了 spinner 和 text，React Loading Overlay 还提供了其他选项：
active
类型：boolean（必须）
用于告诉 LoadingOverlay 组件是否应该被呈现。如果传递 true，组件将被呈现；如果传递 false，组件将不被呈现。
<LoadingOverlay active={true} />spinner
类型：boolean（可选）
表示是否应该呈现正在加载状态的旋转器。
<LoadingOverlay active={true} spinner />text
类型：string（可选）
在遮罩层上方放置一些文本，例如“页面加载中，请稍候……”。text 属性必须与 spinner 属性一起使用。
<LoadingOverlay active={true} spinner text="页面加载中，请稍候……" />fadeSpeed
类型：number（可选）
指定 Loading Overlay 渐入渐出的速度（以毫秒为单位）。
<LoadingOverlay active={true} fadeSpeed={500} />zIndex
类型：number（可选）
指定遮罩层 div 的 z-index，用于确保遮罩层始终位于其他元素之上。
<LoadingOverlay active={true} zIndex={100} />styles
类型：object（可选）
提供自定义样式选项的对象。例如，你可以通过以下方式调整背景颜色：
<LoadingOverlay
active={true}
styles={{
wrapper: {
backgroundColor: "rgba(255, 255, 255, 0.8)",
},
}}
/>可以通过传递以下样式键来调整 React Loading Overlay 的外观：
- wrapper：用于包装 Loading Overlay 和其内容的 div 元素。
- content：包含 spinner 和文本的 div 元素。
- spinner：旋转器的 div 元素。
- text：文本标签的 div 元素。
示例代码
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ ----- ---- --------
------ -------------- ---- ------------------------------------
----- --- - -- -- -
----- ----------- ------------- - ----------------
----- ------ -------- - -------------
------------ -- -
----- --------- - ----- -- -- -
-------------------
----- ------ - ----- ------
--------------------------------------------
--
--------------------
---------------------
--
------------
-- ----
------ -
-----
---------------
------------------
-------
---------------
---------
-------- -
---------------- ---------- ---- ---- ------
--
--
-
----
---------------- -- -
--- -------------------------------
---
-----
-----------------
------
--
--
------ ------- ----以上示例代码展示了如何使用 React Loading Overlay 在 React 应用中创建加载状态的遮罩层。在这个示例中，我们使用 useState 和 useEffect 来获取 JSON 数据，并在加载时显示 React Loading Overlay。在获取数据后，我们使用 setIsLoading(false) 隐藏覆盖层并显示列表。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc781e8991b448dd43f