React Skeleton Loader

React Skeleton Loader is a React component designed to help you easily integrate custom animated skeletons for loading states. It best works with text elements as it adopts to the fonts size and line height of your content, but it can be easily fitted to use with other objects like images and avatars.

Demo

Click here 👌

Basic Usage

The components you create should have loading states embeded in them. You can do this however you want. You could rely on state changes, promise responses, or simply checking if the props passed aren't undefined.

import Skeleton from 'react-skeleton-loader';

const Page = (props) => {
  return(
    <div>
      <h1>props.title | <Skeleton /></h1>
      <p>props.body | <Skeleton count={5} /></p>
    </div>
  )
}

Props

| Prop | Type | Default | Description | | ---------------- | ------- | ------- | ------------------------------------- | | width | string | "150px" | The (max) width of the element | | height | string | "100%" | The (max) height of your element | | widthRandomness | number | 0.25 | Amount of width randomness | | heightRandomness | number | 0 | Amount of height randomness | | borderRadius | string | 8px | border radius of the element | | color | string | #EFF1F6 | the background color of the element | | count | number | 1 | How many time should this be repeated | | animated | boolean | true | If it should animate |

When using widthRandomness or heightRandomness the maximum width and height will be determined by width and height props. It can then only decrease. For example if widthRandomness is set to 0.25, and width is set to 100px the width will vary between 100px and 75px.

Licence

MIT