@alexkirsz/react-content-loader 是一个 React 组件，它可以轻松地创建占位符加载器，不仅可以帮助我们优化用户体验，还可以让我们的页面看起来更好看。在本文中，我们将学习如何使用这个包。
安装
在使用 @alexkirsz/react-content-loader 之前，我们需要先安装它。在你的项目目录下，执行以下命令：
npm install @alexkirsz/react-content-loader --save
这个命令将会在你的项目中安装这个包，并将其添加到 package.json 文件的 dependencies 中。
使用
在我们开始使用这个包之前，让我们先了解一下它的基本结构。
-- -------------------- ---- -------
------ ------------- ---- ----------------------------------
----- -------- - -- -- -
------ -
---------------
----- ----- ----- ------ ------ ---------- ----------- --
----- ------ ------ ------ ------ ----------- ----------- --
----- ------ ------ ------ ------ ----------- ----------- --
----------------
--
--这是一个简单的使用 @alexkirsz/react-content-loader 创建的加载器。这个组件会返回一个 SVG 图标，SVG 图标中包含了 rect 元素，每个 rect 元素都是一个占位符。我们可以通过 x、y、rx、ry、width 和 height 属性来自定义它们的形状和位置。
我们可以将加载器嵌套在你的组件中，以在渲染数据之前显示一个占位符。下面是一个使用这个包的示例：
-- -------------------- ---- -------
------ ------------- ---- ----------------------------------
----- ----------- - -- ---------- ---- -- -- -
------ -
-----
---------- - -
---------------
----- ----- ----- ------ ------ ---------- ----------- --
----- ------ ------ ------ ------ ----------- ----------- --
----- ------ ------ ------ ------ ----------- ----------- --
----------------
- - -
-------------- -- -
---- ---------------
----------------------
--------------------------
------
--
--
------
--
--在这个例子中，我们首先检查 isLoading 是否为真，如果是，我们就显示占位符加载器，否则就渲染我们的数据。
自定义
@alexkirsz/react-content-loader 允许我们通过一些属性来自定义加载器。以下是可用的属性列表：
width：占位符的宽度。默认值为400。height：占位符的高度。默认值为130。style：加载器的样式。默认值为{}。speed：动画的速度。默认值为2。primaryColor：主颜色。默认值为#f0f0f0。secondaryColor：次要颜色。默认值为#e0e0e0。preserveAspectRatio：定义如何适应 SVG 视口的图像比例。默认值为xMidYMid meet。uniqueKey：用来标识加载器的 Key 值。默认值为content-loader。
以下是一个自定义加载器的示例：
-- -------------------- ---- -------
------ ------------- ---- ----------------------------------
----- -------------- - -- -- -
----- ------------- - -
------ ----
------- ----
------ - ------- -- ----- --
------ ----
------------- ----------
--------------- -------
-------------------- --------- -------
---------- -------------------
--
------ -
-------------- -------------------
----- ----- ----- ------ ------ ----------- ------------ --
----- ------- ----- ------ ------ ----------- ----------- --
----- ------- ------ ------ ------ ----------- ----------- --
----------------
--
--结论
@alexkirsz/react-content-loader 是一个很方便的占位符加载器库，它可以帮助我们优化用户体验，提高我们页面的良好性。我们在本文中学习了如何安装和使用这个包，以及如何自定义加载器。现在，你可以使用它来为你的应用程序创建占位符加载器了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d530d0927023822b32