react content loader

由SVG驱动的组件轻松创建占位持有人加载（例如Facebook的卡加载）。

特征

• 可自定义：随时更改颜色，速度，尺寸，甚至RTL ；
• ？插件：使用许多预设，请参见示例；
• ✏️DIY ：使用Create-Content-Loader轻松创建自己的自定义加载程序；
• 反应本机支持：相同的API，与强大的功能相同；
• 真正的轻量级： Web版本的少于2KB和0个依赖项；

指数

• 入门
• 用法
  • 本国的
• 选项
• 例子
• 故障排除
• 类似的软件包
• 发展

入门

npm i react-content-loader --save

yarn add react-content-loader

对于反应天然

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安装它

本国的

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

1。预设，请参见示例：

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

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

2。自定义模式

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

 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	反应dom 反应天然	选择false的动画
title?: string 默认Loading...	仅反应DOM	它用于描述它是什么元素。 使用'' （空字符串）删除。
baseUrl?: string 默认为空字符串	仅反应DOM	如果您使用<base url="/" />文档<head/>则需要。 该道具常用于： <ContentLoader baseUrl={window.location.pathname} />将用相对路径填充SVG属性。相关＃93。
speed?: number 默认为1.2	反应dom 反应天然	动画速度在几秒钟内。
viewBox?: string 默认为undefined	反应dom 反应天然	使用Viewbox Props设置自定义查看框值， 有关如何使用它的更多信息， 阅读文章如何扩展SVG。
gradientRatio?: number 默认为1.2	仅反应DOM	动画梯度的宽度是视框宽度的一小部分。
rtl?: boolean 默认为false	反应dom 反应天然	内容左右。
backgroundColor?: string 默认为#f5f6f7	反应dom 反应天然	用作动画的背景。
foregroundColor?: string 默认为#eee	反应dom 反应天然	用作动画的前景。
backgroundOpacity?: number 默认为1	反应dom 反应天然	背景不透明度（0 =透明，1 =不透明） 用于解决野生动物园中的问题
foregroundOpacity?: number 默认为1	反应dom 反应天然	动画不透明度（0 =透明，1 =不透明） 用于解决野生动物园中的问题
style?: React.CSSProperties 默认为{}	仅反应DOM
uniqueKey?: string 默认为随机唯一ID	仅反应DOM	使用相同的prop键的值 这将解决SSR上的不一致之处，请参阅此处的更多信息。
beforeMask?: JSX.Element 默认为null	反应dom 反应天然	在内容之前定义自定义形状， 在这里查看更多。

查看所有现场选项

例子

Facebook风格

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

const MyFacebookLoader = ( ) => < Facebook /> 

Instagram样式

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

const MyInstagramLoader = ( ) => < 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与背景样式匹配，因此在SSR：SERVER和CLINES的情况下，ID的随机值将两次生成两次，它可能会遇到意外错误并在渲染上进行无与伦比的警告；或在快照测试的情况下：在第一场比赛中并重新运行测试。

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

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

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

Alpha不起作用：Safari / ios

当使用rgba作为backgroundColor或foregroundColor值时，Safari不尊重Alpha通道，这意味着颜色将是不透明的。为了防止这种情况，不要使用rgba值进行backgroundColor / foregroundColor ，而是使用rgb等效物，而是将Alpha通道值移至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 } >

野生动物园 / iOS中的黑匣子（再次）

在包含SVG元素的页面上使用基本标签无法渲染，看起来像一个黑匣子。只需从<head />中删除基本HREF标签，就可以解决问题。

请参阅：＃93 /109

浏览器支持SVG临时

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

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

类似的软件包

• 反应天然：RN占位符，反应-SVG-Animated-nirear级别；
• 预先反应；
• vue.js：vue-content-loading，vue-content-loader;
• Angular：NGX-Content-Loading，NGX-Content-Loader。

---

发展

分叉存储库，然后克隆它

 $ git clone [email protected]:YourUsername/react-content-loader.git && cd react-content-loader

$ npm i ：安装依赖项；

$ npm run build ：生产构建；

$ npm run dev ：运行故事书以查看您的更改；

$ npm run test ：运行所有测试：类型检查，Web和本机上的单元测试；

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

反应天然

由于React Native不支持符号链接（要将依赖关系链接到另一个文件夹），并且由于没有操场可以检查您的贡献（例如Storybook），因此建议在本地运行该项目的策略：

1. 从头开始创建一个新的反应本机，无论是地铁还是创建反应的新闻；
2. 将依赖性安装到根项目中： yarn add react-content-loader react-native-svg
3. 打开刚刚创建的项目并克隆该存储库；
4. 创建您的加载组件，然后将react-content-loader指向仅克隆的项目，例如： import ContentLoader, { Rect, Circle } from './react-content-loader/native'

提交消息

提交消息应遵循“提交消息约定”，因此，可以自动生成ChangElogs。提交消息会在提交时自动验证。如果您不熟悉“提交消息约定”，则可以使用YARN COMMIT（或npm run commit ）而不是Git Commit，这提供了用于生成适当提交消息的交互式CLI。

执照

麻省理工学院