介绍
react-bhy-loading 是一款前端 React 组件库，提供了非常灵活易用的 Loading 组件。该组件库基于 React 和 TypeScript 开发，并支持多种动画效果。
安装和使用
在项目中使用 react-bhy-loading，首先需要安装该 npm 包：
npm install react-bhy-loading --save
在需要使用 Loading 的组件中，引入并使用 react-bhy-loading：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- --------------------
-------- ----------- -- -
------ -
--
------ --------------
-------- ----------- --
---
--
-API
react-bhy-loading 提供了以下 API。
Loading Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| show | boolean | false | 是否显示 Loading |
| type | string | 'spinner' | Loading 的类型，可选值为 'spinner'、'line'、'circle'、'ellipsis'、'rect' |
| color | string | '#fff' | Loading 的颜色 |
全局配置
react-bhy-loading 还支持全局配置，方便在多个组件中统一设置 Loading 样式。在应用中的入口文件中，调用 Loading.setGlobalConfig 方法即可全局配置 Loading：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ - ------- - ---- -------------------- ------------------------- ----- --------- ------ ----- --- -------------------- --- ---------------------------------
示例
以下是 react-bhy-loading 的两个示例。
基本用法
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------- ---- --------------------
-------- ------- -- -
----- ------------- --------------- - ----------------
----- ----------- - -- -- -
-----------------------------
--
------ -
--
----------------
------- ---------------------------- ----------------
-------- ------------------ --
---
--
-全局配置
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------- - ---- --------------------
-------------------------
----- -------
------ --------
---
-------- --- -- -
------ -
--
------------
-------- ----------- --
---
--
-
-------------------- --- ---------------------------------总结
react-bhy-loading 是一款方便易用的 Loading 组件库，可以为应用增加一些动感和等待体验。使用该组件库时，可以通过 API 和全局配置对 Loading 进行灵活的设置，满足不同场景下的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559fe81e8991b448d7a77