React Skeleton Loading

Hey, we're in development.

Usage

Installation

Npm: $ npm i react-skeleton-loading --save

You can use it in two ways :

// import the individual component
import { Skeleton } from 'react-skeleton-loading'

const MyLoader = () => <Skeleton />

Options

Name	Type	Default	Description
animate	{Boolean}	true	false to render with no animation
speed	{Number}	2	Animation speed in seconds
display	{Boolean}	true	Display skeleton loading or not
className	{String}	''	Classname in the parent div
width	{Number}	400	width of div
height	{Number}	130	height of div
backgroundColor	{String}	#f3f3f3	Background
gradientColor	{String}	#ecebeb	Animation color
widthRandomness	{Number}	1	Todo
heightRandomness	{Number}	1	Todo
style	{Object}	null	Ex: { width: '100%', height: '70px' }
children	{node}	null	Todo.

**Or in custom mode

You can only add the attribute skeleton to the div you want to have a skeleton loading.

import { CustomSkeleton } from 'react-skeleton-loading'

const Example = () => (
  <div>
    <div skeleton>
      ...
    </div>
    <div>
      ...
    </div>
    <div skeleton>
      ...
    </div>
  </div>  
)

const MyLoader = () => (
  <CustomSkeleton
    component={<Example />}

  />
)

Options

Name	Type	Default	Description
component	{node}	null	Custom react component
children	{node}	null	Todo.
display	{Boolean}	true	Display skeleton loading or not

Credit

Originally made by @VipulSingh.

Made possible by @VikramThakur by his valuable contributions.