66

0

React Content Loader

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

示例的 react-content-loader

支持 SVG 的组件,可轻松创建占位符加载(如 Facebook 的卡片加载)。

特征

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

入门

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 用作 backgroundColorforegroundColor 值时, 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