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. |
| **`baseUrl?: string`**
Defaults to an empty string | React DOM only | Required if you're using `` document `