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
| Prop name and type
| Environment | Description |
| ------------------------------------------------------------- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`animate?: boolean`**
Defaults to `true` | React DOM
React Native | Opt-out of animations with `false` |
| **`title?: string`**
Defaults to `Loading interface...` | React DOM only | It's used to describe what element it is.
Use `''` (empty string) to remove. |
| **`speed?: number`**
Defaults to `1.2` | React DOM
React Native | Animation speed in seconds. |
| **`interval?: number`**
Defaults to `0.25` | React DOM only | Interval of time between runs of the animation,
as a fraction of the animation speed. |
| **`viewBox?: string`**
Defaults to `undefined` | React DOM
React Native | Use viewBox props to set a custom viewBox value,
for more information about how to use it,
read the article [How to Scale SVG](https://css-tricks.com/scale-svg/). |
| **`gradientRatio?: number`**
Defaults to `1.2` | React DOM only | Width of the animated gradient as a fraction of the view box width. |
| **`rtl?: boolean`**
Defaults to `false` | React DOM
React Native | Content right-to-left. |
| **`backgroundColor?: string`**
Defaults to `#f5f6f7` | React DOM
React Native | Used as background of animation. |
| **`foregroundColor?: string`**
Defaults to `#eee` | React DOM
React Native | Used as the foreground of animation. | |
| **`style?: React.CSSProperties`**
Defaults to `{}` | React DOM only | |
| **`uniqueKey?: string`**
Defaults to random unique id | React DOM only | Use the same value of prop key,
that will solve inconsistency on the SSR, see more [here](https://github.com/danilowoz/react-content-loader/issues/78). |
See all options [live](https://danilowoz.com/react-content-loader/)
## Examples
##### Facebook Style
```jsx
import { Facebook } from 'react-content-loader'
const MyFacebookLoader = () =>
```
##### Instagram Style
```jsx
import { Instagram } from 'react-content-loader'
const MyInstagramLoader = () =>
```
##### Code Style
```jsx
import { Code } from 'react-content-loader'
const MyCodeLoader = () => 
##### 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 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 = () => (