Super-react-loader NPM

Super React Loader

The easiest way to implement a full-screen loader in React. Just import the library and write loader.show().

Demo

Install

Using Npm:

npm i super-react-loader

or using Yarn:

yarn add super-react-loader

Basic usage

import loader from 'super-react-loader'

loader.show() // shows loader
loader.hide() // hides loader

Very easy and clean :)

Customization

You can choose between some preset loaders or create your custom.

Preset loaders

To use it you have to pass the preset name.

// in your index.js
loader.setPresetLoader({ preset: 'fold' })

All options

loader.setPresetLoader({
    preset: 'plane',    // loader preset name
    size: '8rem',       // loader size
    color: '#000',      // loader color
    bg: 'lightblue'     // background property
})

Available loaders (based on SpinKit library)

plane
chase
baunce
wave
pulse
flow
swing
circle
circle-fade (default)
grid
fold
wander

Set your custom loader component

const MyCustomLoader = () => <div>loading...</div>

loader.setCustomLoader(<MyCustomLoader />)

You can combine it with setPresetLoader to define the background

const MyCustomLoader = () => <div>Loading...</div>

loader.setPresetLoader({ bg: '#652BE2' }) // change background color
loader.setCustomLoader(<MyCustomLoader />)

API

`loader.show([callBack()])`

Mount loader component. Accepts an optional callback function that is executed when the loader render is complete.

`loader.hide()`

Unmount loader component.

`loader.setPresetLoader({ preset, size, color, bg })`

Changes the loader animation by another preset loader. Receives a strings object.

preset: Name of the preset. Default is 'circle-fade'.
size: Size of the loader. It set css width and length property. Default is '4rem'
color: Color of the loader. Default is '#333'
bg: Background css property. Default is '#fff'