# react-skeleton-loader

> A react helper for skeleton loaders

Latest version **1.0.4** (published 2019-01-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-skeleton-loader
pnpm add react-skeleton-loader
yarn add react-skeleton-loader
bun add react-skeleton-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2019-01-03 |
| First published | 2018-02-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 38.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 62 |
| Author | Henrikas Kuzmickas |
| Maintainers | henrykuzmick |
| Keywords | react, skeleton, loader, preload, animated, dummy |

## Links

- npm: https://www.npmjs.com/package/react-skeleton-loader
- Repository: https://github.com/henrykuzmick/react-skeleton-loader
- Homepage: https://github.com/henrykuzmick/react-skeleton-loader#readme
- Issues: https://github.com/henrykuzmick/react-skeleton-loader/issues
- npm.io page: https://npm.io/package/react-skeleton-loader

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2019-01-03
- 1.0.3 — 2018-09-01
- 1.0.2 — 2018-02-09
- 1.0.1 — 2018-02-09
- 1.0.0 — 2018-02-09
- 0.1.6 — 2018-02-08
- 0.1.5 — 2018-02-08
- 0.1.4 — 2018-02-08
- 0.1.3 — 2018-02-08
- 0.1.2 — 2018-02-08
- 0.1.1 — 2018-02-08
- 0.1.0 — 2018-02-08

## README

# React Skeleton Loader

[![npm version](https://badge.fury.io/js/react-skeleton-loader.svg)](https://badge.fury.io/js/react-skeleton-loader)
[![gzip size](http://img.badgesize.io/https://unpkg.com/react-skeleton-loader/dist/Skeleton.min.js?compression=gzip)](https://unpkg.com/react-skeleton-loader/dist/Skeleton.min.js)

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 👌](https://henrykuzmick.github.io/react-skeleton-loader)

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

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

---
_Source: https://npm.io/package/react-skeleton-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._