React Content Loader 使用教程

最新推荐文章于 2024-09-09 08:31:51 发布

gitblog_00881

最新推荐文章于 2024-09-09 08:31:51 发布

阅读量510

点赞数

本文链接：https://blog.csdn.net/gitblog_00881/article/details/141380559

版权

React Content Loader 使用教程

react-content-loader⚪ SVG-Powered component to easily create skeleton loadings.项目地址:https://gitcode.com/gh_mirrors/re/react-content-loader

项目介绍

React Content Loader 是一个基于 React 的开源项目，用于创建可定制的 SVG 占位符（placeholder）组件。这些占位符通常用于在内容加载之前显示，以提高用户体验。项目的主要目的是模仿 Facebook 的内容加载效果，使得用户在等待内容加载时不会感到页面空白或加载缓慢。

项目快速启动

安装

首先，你需要在你的 React 项目中安装 react-content-loader：

npm install react-content-loader

基本使用

在你的 React 组件中引入并使用 ContentLoader：

import React from 'react';
import ContentLoader from 'react-content-loader';

const MyLoader = () => (
  <ContentLoader>
    {/* 在这里定义你的 SVG 路径 */}
    <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
    <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
    <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
  </ContentLoader>
);

export default MyLoader;

自定义样式

你可以通过传递 props 来自定义 ContentLoader 的样式：

<ContentLoader
  speed={2}
  width={400}
  height={160}
  viewBox="0 0 400 160"
  backgroundColor="#f3f3f3"
  foregroundColor="#ecebeb"
>
  {/* SVG 路径 */}
</ContentLoader>