# React Loaders Kit
[![npm version](https://badge.fury.io/js/react-loaders-kit.svg)](https://www.npmjs.com/package/react-loaders-kit)
[![license](https://img.shields.io/npm/l/react-spinners.svg)]()
A simple yet robust and comprehensive collection of loading animations made with React.js based on inspiration from designers and developers on codepen.
This package was made using the [Emotion](https://emotion.sh/docs/introduction) css library.
## Demo Page
All loaders can be found on the demo page
- [Demo Page](https://seimodei.github.io/react-loaders-kit-examples/)
## Installation
With npm:
```bash
npm install --save react-loaders-kit
```
With Yarn:
```bash
yarn add react-loaders-kit
```
## Usage
All loaders come with their own default properties. You have the option to overwrite these properties by passing in your own props into the loaders.
**IMPORTANT**: All loaders accept a `loading` prop as a boolean that is `required`. Without passing the loading prop, an `error` is thrown. The loader will render `none` if `loading` is `false`.
### Example
```js
import React, {useState} from "react";
import { BarsLoader } from 'react-loaders-kit';
//or
import BarsLoader from 'react-loaders-kit/lib/bars/BarsLoader'; // Recommended to reduce bundle size
const MyWonderfulComponent = () => {
const [loading, setLoading] = useState(true);
const loaderProps = {
loading,
size: 35,
duration: 1,
colors: ['#5e22f0', '#f6b93b']
}
return (
)
}
```
## Available Loaders, PropTypes, and Default Values
Common default props for all loaders:
```js
loading: true;
pause: false;
```
**IMPORTANT**: The `loading` prop is `REQUIRED` and needs to be passed for the loader to display.
### `pause` props
All loaders accept a `pause` prop which is a boolean. If `pause` is `true`, the animation is paused else it deafults to `playing`.
### `color` & `colors` props
Some loaders accept a `color` prop which is a color hash string in the format of `#XXXXXX` or `#XXX`.
Other loaders which have more customization accept a `colors` prop which is a string array of colors in the format of `['#XXXXXX', '#XXXXXX', ...]` or `['#XXX', '#XXX', ...]`.
### All loaders
The tables below contain the default values of each prop on all loaders.
#### ``
| size: number | colors: string[] |
| -------------|----------------------|
| 50 |['#5e22f0', '#f6b93b']|
#### ``
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 50 |['#5e22f0', '#5e22f0']| 1 |
#### ``
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 35 |['#5e22f0', '#f6b93b']| 1 |
#### ``
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 40 |'#5e22f0' | 1.5 |
#### ``
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 50 |'#5e22f0' | 0.7 |
#### ``
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 40 |'#5e22f0' | 1.3 |
#### ``
| boxNumber: number | colors: string[] | duration: number |
| ------------------|---------------------------------|----------------------|
| 3 |['#5e22f0', '#5e22f0', '#5e22f0']| 0.7 |
##### NOTE: The number of boxes must correspond to the number of colors in the array
#### ``
| size: number | colors: string[] | duration: number |
| ------------------|---------------------------------|----------------------|
| 40 |['#5e22f0', '#5e22f0', '#5e22f0']| 0.4 |
#### ``
| size: number | colors: string[] |
| ------------------|--------------------------------------------|
| 40 |['#5e22f0', '#5e22f0', '#5e22f0', '#5e22f0']|
#### ``
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 40 |'#5e22f0' | 0.5 |
#### ``
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 120 |'#5e22f0' | 1 |
#### ``
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 40 |['#5e22f0', '#5e22f0']| 1 |
#### ``
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 45 |'#5e22f0' | 2 |
#### ``
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 30 |['#5e22f0', '#5e22f0']| 2.5 |
#### ``
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 50 |'#5e22f0' | 0.8 |
#### ``
| size: number | colors: string[] |
| ------------------|---------------------------------|
| 35 |['#5e22f0', '#5e22f0', '#5e22f0']|
#### ``
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 60 |'#5e22f0' | 1 |
#### ``
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 40 |'#5e22f0' | 1 |
#### ``
| size: number | colors: string[] |
| ------------------|----------------------|
| 60 |['#5e22f0', '#5e22f0']|
#### ``
| size: number | colors: string[] | duration: number |
| ------------------|--------------------------------------------|----------------------|
| 40 |['#5e22f0', '#5e22f0', '#5e22f0', '#5e22f0']| 1 |
#### ``
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 45 |'#5e22f0' | 1 |
#### ``
| size: number | colors: string[] |
| ------------------|--------------------------------------------|
| 35 |['#5e22f0', '#5e22f0', '#5e22f0', '#5e22f0']|
#### ``
| size: number | color: string |
| ------------------|----------------------|
| 60 |'#5e22f0' |
#### ``
| size: number | color: string |
| ------------------|----------------------|
| 60 |'#5e22f0' |
#### ``
| size: number | colors: string[] |
| ------------------|---------------------------------|
| 80 |['#f6b93b', '#5e22f0', '#ef5777']|
#### ``
| numberOfDots: number | numberOfDots: number | colors: string[] | duration: number |
| ---------------------| ---------------------|---------------------------------|----------------------|
| 90 | 10 |['#5e22f0', '#f6b93b'] | 1.5 |
#### ``
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 45 |['#5e22f0', '#5e22f0']| 0.6 |
#### ``
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 50 |['#ffffff', '#5e22f0']| 2 |
#### ``
| size: number | jellyNumber: number | colors: string[] | duration: number |
| -------------| --------------------|-------------------------------------------------------|----------------------|
| 150 | 5 |['#5e22f0', '#5e22f0', '#5e22f0', '#5e22f0', '#5e22f0']| 0.6 |
#### NOTE: The number of jellies must correspond to the number of colors in the array
#### ``
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 60 |['#5e22f0', '#5e22f0']| 0.5 |
#### ``
| lineWidth: number | color: string | duration: number |
| ------------------|----------------------|----------------------|
| 25 |'#5e22f0' | 2 |
#### ``
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 130 |['#5e22f0', '#ef5777']| 0.8 |
#### ``
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 40 |'#5e22f0' | 2 |
#### ``
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 60 |['#5e22f0', '#5e22f0']| 1 |
#### ``
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 40 |['#5e22f0', '#5e22f0']| 2 |
#### ``
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 90 |['#5e22f0', '#5e22f0']| 0.8 |
#### ``
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 15 |'#5e22f0' | 0.8 |
#### ``
| size: number | colors: string[] |
| ------------------|---------------------------------|
| 55 |['#5e22f0', '#5e22f0', '#5e22f0']|
#### ``
| size: number | boxBorderWidth: number | colors: string[] | duration: number |
| -------------| -----------------------|--------------------------------------------|----------------------|
| 10 | 2 |['#ffffff', '#ffffff', '#5e22f0', '#5e22f0']| 3 |
#### ``
| size: number | colors: string[] | duration: number |
| ------------------|--------------------------------------------|----------------------|
| 20 |['#5e22f0', '#5e22f0', '#f6b93b', '#ef5777']| 1.2 |
#### ``
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 80 |'#5e22f0' | 1 |
#### ``
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 10 |['#5e22f0', '#5e22f0']| 1 |
#### ``
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 40 |'#5e22f0' | 1 |
#### ``
| size: number | colors: string[] |
| ------------------|----------------------|
| 50 |['#5e22f0', '#ffffff']|
#### ``
| size: number | colors: string[] |
| ------------------|--------------------------------------------|
| 50 |['#5e22f0', '#5e22f0', '#5e22f0', '#5e22f0']|
#### ``
| size: number | colors: string[] | duration: number |
| -------------|---------------------------------|----------------------|
| 18 |['#5e22f0', '#5e22f0', '#5e22f0']| 1 |
#### ``
| size: number | colors: string[] | duration: number |
| -------------|---------------------------------|----------------------|
| 20 |['#5e22f0', '#5e22f0', '#5e22f0']| 1 |
#### ``
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 40 |'#5e22f0' | 0.7 |
#### ``
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 35 |['#5e22f0', '#ffffff']| 0.6 |
#### ``
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 40 |['#5e22f0', '#5e22f0']| 2 |
#### ``
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 40 |'#5e22f0' | 0.6 |
## Contributing
- Pull requests and ⭐ stars are always welcome
- For bugs and feature requests, please create an issue
## License
MIT