QQ SVG- Powered 组件以方便创建骨架加载.
SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading). ## Features - :gear: **Customizable:** Feel free to change the colors, speed, sizes, and even **RTL**; - :ok_hand: **Plug and play:** with many presets to use, see the [examples](http://danilowoz.com/create-content-loader/#gallery); - :pencil2: **DIY:** use the [create-content-loader](https://danilowoz.com/create-content-loader) to create your own custom loaders easily; - 📱 **React Native support**: same API, as same powerful features; - ⚛️ **Really lightweight:** less than **2kB** and **0 dependencies** for web version; ## Index - [Getting Started](#gettingstarted) - [Usage](#usage) - [Native](#native) - [Options](#options) - [Examples](#examples) - [Troubleshooting](#troubleshooting) - [Similar packages](#similarpackages) - [Development](#development) ## Getting Started ```sh npm i react-content-loader --save ``` ```sh yarn add react-content-loader ``` ### For React Native ```sh npm i react-content-loader react-native-svg --save ``` ```sh yarn add react-content-loader react-native-svg ``` CDN from [JSDELIVR](https://www.jsdelivr.com/package/npm/react-content-loader) ## Usage There are two ways to use it: **1. Presets, see the [examples](https://danilowoz.com/react-content-loader/):** ```jsx import ContentLoader, { Facebook } from 'react-content-loader' const MyLoader = () => const MyFacebookLoader = () => ``` **2. Custom mode, see the [online tool](https://danilowoz.com/create-content-loader)** ```jsx const MyLoader = () => ( {/* Only SVG shapes */} ) ``` **Still not clear?** Take a look at this working example at [codesandbox.io](https://codesandbox.io/s/moojk887z9) Or try the components editable demo hands-on and install it from [bit.dev](https://bit.dev/danilowoz/react-content-loader) ## Native `react-content-loader` can be used with React Native in the same way as web version with the same import: **1. Presets, see the [examples](#examples):** ```jsx import ContentLoader, { Facebook } from 'react-content-loader/native' const MyLoader = () => const MyFacebookLoader = () => ``` **2. Custom mode** **To create custom loaders there is an important difference:** as React Native doesn't have any native module for SVG components, it's necessary to import the shapes from [react-native-svg](https://github.com/react-native-community/react-native-svg) or use the named export Rect and Circle from `react-content-loader` import: ```jsx import ContentLoader, { Rect, Circle } from 'react-content-loader/native' const MyLoader = () => ( ) ``` ## Options | | Environment | Description | | ---------------------------------------------------------------- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **`animate?: boolean`**
```
##### List Style
```jsx
import { List } from 'react-content-loader'
const MyListLoader = () =>
```
##### Bullet list Style
```jsx
import { BulletList } from 'react-content-loader'
const MyBulletListLoader = () =>
```
### Custom Style
For the custom mode, use the
[online tool](https://danilowoz.com/create-content-loader).
```jsx
const MyLoader = () => (
{/* Only SVG shapes */}
)
```
## Troubleshooting
#### Responsive - Mobile version
In order to avoid unexpected behavior, the package doesn't have opinioned settings. So if it needs to be responsive, have in mind that the output of the package is a regular SVG, so it just needs the same attributes to become a regular SVG responsive, which means:
```jsx
import { Code } from 'react-content-loader'
const MyCodeLoader = () => (
)
```
#### Server-side rendering (SSR) - Match snapshot
As the main component generates random values to match the id of the SVG element with background style, it can encounter unexpected errors and unmatching warning on render, once the random value of id will be generated twice, in case of SSR: server and client; or in case of snapshot test: on the first match and re-running the test.
To fix it, set the prop [`uniqueKey`](https://github.com/danilowoz/react-content-loader#uniquekey-string---web-only), then the id will not be random anymore:
```jsx
import { Facebook } from 'react-content-loader'
const MyFacebookLoader = () =>
```
#### **Alpha is not working: Safari / iOS**
When using `rgba` as a `backgroundColor` or `foregroundColor` value, [Safari does not respect the alpha channel暂无开放 Issues，或尚未同步最近议题。