React Content Loader

899

0

React Content Loader

React 骨架屏 SVG

支持 SVG 的组件，可轻松创建骨架加载。

示例的 react-content-loader

支持 SVG 的组件，可轻松创建占位符加载（如 Facebook 的卡片加载）。

特征

  • ⚙️ 可定制： 随意更改颜色、速度、大小，甚至 RTL ；
  • 👌 即插即用： 有许多预设可供使用，请参阅 示例；
  • ✏️ DIY： 使用 create-content-loader 轻松创建自己的自定义加载器；
  • 📱 React Native 支持 ：同样的 API，同样强大的功能；
  • ⚛️ 真正轻量级： 网页版小于2kB和 0 依赖 ；

入门

npm i react-content-loader --save
yarn add react-content-loader

对于 React Native

npm i react-content-loader react-native-svg --save
yarn add react-content-loader react-native-svg

来自 JSDELIVR的 CDN

用法

有两种使用方法：

1.预设，见 例子：

import ContentLoader, { Facebook } from 'react-content-loader'

const MyLoader = () => <ContentLoader />
const MyFacebookLoader = () => <Facebook />

2.自定义模式，见 在线工具

const MyLoader = () => (
  <ContentLoader viewBox="0 0 380 70">
    {/* Only SVG shapes */}    
    <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>
)

还是不清楚？在codesandbox.io上查看这个工作示例 或尝试组件可编辑演示动手并从bit.dev安装它

Native

react-content-loader可以以与具有相同导入的 Web 版本相同的方式与 React Native 一起使用：

1.预设，见 例子：

import ContentLoader, { Facebook } from 'react-content-loader/native'

const MyLoader = () => <ContentLoader />
const MyFacebookLoader = () => <Facebook />

2.自定义模式

要创建自定义加载器，有一个重要区别： 由于 React Native 没有任何用于 SVG 组件的本地模块，因此必须从react-native-svg导入形状或使用命名的导出 Rect 和 Circle 从 react-content-loader导入：

import ContentLoader, { Rect, Circle } from 'react-content-loader/native'

const MyLoader = () => (
  <ContentLoader viewBox="0 0 380 70">
    <Circle cx="30" cy="30" r="30" />
    <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>
)

选项

道具名称和类型 环境 描述
animate?: boolean默认为 true React DOM反应本机 选择退出动画 false
title?: string默认为 Loading... 仅React DOM 它用于描述它是什么元素。使用 ''（空字符串）删除。
baseUrl?: string默认为空字符串 仅React DOM 如果您使用的是 document ，则为必需。 该道具通常用作： `` 它将使用相对路径填充 SVG 属性。相关 #93。
speed?: number默认为 1.2 React DOM React Native 动画速度以秒为单位。
interval?: number默认为 0.25 React DOM React Native 动画运行之间的时间间隔，作为动画速度的一部分。
viewBox?: string默认为 undefined React DOM反应本机 使用 viewBox 属性设置自定义 viewBox 值，有关如何使用它的更多信息，请阅读文章How to Scale SVG。
gradientRatio?: number默认为 1.2 仅React DOM 动画渐变的宽度作为视图框宽度的一部分。
gradientDirection?: string默认为 left-right 仅React DOM 渐变动画的方向。用于实现自上而下的动画
rtl?: boolean默认为 false React DOM React Native 内容从右到左。
backgroundColor?: string默认为 #f5f6f7 React DOM React Native 用作动画的背景。
foregroundColor?: string默认为 #eee React DOM React Native 用作动画的前景。
backgroundOpacity?: number默认为 1 仅React DOM 背景不透明度（0 = 透明，1 = 不透明）用于解决 Safari中的问题
foregroundOpacity?: number默认为 1 仅React DOM 动画不透明度（0 = 透明，1 = 不透明）用于解决 Safari中的问题
style?: React.CSSProperties默认为 {} 仅React DOM
uniqueKey?: string默认为随机唯一 ID 仅React DOM 使用相同的 prop key 值，这将解决 SSR 上的不一致问题，请参阅 此处。
beforeMask?: JSX.Element默认为空 React DOM React Native 在内容之前定义自定义形状，在 此处查看更多 信息。
animateBegin?: string默认为 undefined 仅React DOM 动画开始前的延迟，与SVG animate 元素的 begin 属性相同

实时查看所有选项

例子

脸书风格
import { Facebook } from 'react-content-loader'

const MyFacebookLoader = () => <Facebook />

脸书风格

Instagram 风格
import { Instagram } from 'react-content-loader'

const MyInstagramLoader = () => <Instagram />

Instagram 风格

代码风格
import { Code } from 'react-content-loader'

const MyCodeLoader = () => <Code />

代码风格

列表样式
import { List } from 'react-content-loader'

const MyListLoader = () => <List />

列表样式

项目符号列表样式
import { BulletList } from 'react-content-loader'

const MyBulletListLoader = () => <BulletList />

项目符号列表样式

自定义样式

对于自定义模式，请使用 在线工具。

const MyLoader = () => (
  <ContentLoader
    height={140}
    speed={1}
    backgroundColor={'#333'}
    foregroundColor={'#999'}
    viewBox="0 0 380 70"
  >
    {/* Only SVG shapes */}
    <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>
)

风俗

故障排除

响应式 - 移动版

为了避免意外行为，包没有意见设置。因此，如果它需要响应式，请记住包的输出是常规 SVG，因此它只需要相同的属性即可成为常规 SVG 响应式，这意味着：

import { Code } from 'react-content-loader'

const MyCodeLoader = () => (
  <Code
    width={100}
    height={100}
    viewBox="0 0 100 100"
    style={{ width: '100%' }}
  />
)

服务器端渲染 (SSR) - 匹配快照

由于主组件生成随机值以匹配SVG元素的id和背景样式，在渲染时可能会遇到意外错误和不匹配警告，一次id的随机值将生成两次，在SSR的情况下：服务器和客户端；或者在快照测试的情况下：在第一场比赛并重新运行测试。

要修复它，请设置 prop uniqueKey，然后 id 将不再是随机的：

import { Facebook } from 'react-content-loader'

const MyFacebookLoader = () => <Facebook uniqueKey="my-random-value" />

Alpha 不工作：Safari / iOS

当 rgba 用作 backgroundColor 或 foregroundColor 值时， Safari 不尊重 alpha 通道，这意味着颜色将是不透明的。为了防止这种情况，不要使用 /的 rgba 值 ，而是使用 等效项并将 alpha 通道值移动到 / 道具。backgroundColor``foregroundColor``rgb``backgroundOpacity``foregroundOpacity

{/* Opaque color in Safari and iOS */}
<ContentLoader
  backgroundColor="rgba(0,0,0,0.06)"
  foregroundColor="rgba(0,0,0,0.12)">


{/_ Semi-transparent color in Safari and iOS _/}
<ContentLoader
    backgroundColor="rgb(0,0,0)"
    foregroundColor="rgb(0,0,0)"
    backgroundOpacity={0.06}
    foregroundOpacity={0.12}>

Safari / iOS 中的黑框（再次）

在包含 SVG 元素的页面上使用基本标记无法呈现，并且它看起来像一个黑盒子。只需从 中删除 base-href 标签， <head /> 问题就解决了。

黑盒子

见： #93 / 109

浏览器支持 SVG-Animate

旧浏览器不支持 SVG 中的动画（兼容性列表），如果您的项目必须支持 IE，例如，这里有几种方法可以确保浏览器支持 SVG Animate：

  • window.SVGAnimateElement
  • document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#SVG-Animation", "1.1")
  • 甚至使用https://modernizr.com/

类似的套餐

发展

分叉回购然后克隆它

$ git clone git@github.com:YourUsername/react-content-loader.git && cd react-content-loader

$ npm i：安装依赖项；

$ npm run build：构建到生产；

$ npm run dev：运行 Storybook 以查看您的更改；

$ npm run test：运行所有测试：类型检查、网络和本地单元测试；

$ npm run test:watch：观看单元测试；

React原生

由于 React Native 不支持符号链接（将依赖项链接到另一个文件夹）并且没有游乐场来检查您的贡献（如故事书），因此建议在本地运行项目的策略：

  1. 从头开始创建一个新的 React Native，Metro 或 create-react-native-app；
  2. 将依赖项安装到您的根项目： yarn add react-content-loader react-native-svg
  3. 打开刚刚创建的项目并在那里克隆这个存储库；
  4. 创建您的加载组件并将其指向 react-content-loader刚刚克隆的项目，例如： import ContentLoader, { Rect, Circle } from './react-content-loader/native'

提交消息

提交消息应遵循 提交消息约定 ，因此可以自动生成更改日志。提交消息在提交时自动验证。如果您不熟悉提交消息约定，您可以使用 yarn commit（或 npm run commit）代替 git commit，它提供了一个交互式 CLI 来生成正确的提交消息。

执照

MIT

看看其他 Datart Dragonfly Reveal.js HTML DOM xzs IconPark Hoppscotch PPTist Casbin Databasir