Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/danilowoz/react-content-loader

⚪ SVG-Powered component to easily create skeleton loadings.
https://github.com/danilowoz/react-content-loader

facebook-cards-loaders hacktoberfest loader loading placeholder react react-native react-native-components skeleton skeleton-screen svg

Last synced: 12 days ago
JSON representation

⚪ SVG-Powered component to easily create skeleton loadings.

Lists

README 

        


  react-content-loader





  Example's react-content-loader




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...`              | 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 `