react-spinner-loader v1.1.1

Features

• Lightweight
• Out of the box loader
• Full Page Loader, Inline Loader
• Custom Loading Message
• Custom Styling Options

Installation

With Yarn

yarn add react-spinner-loader

With npm

npm i --save react-spinner-loader

Usage

react-spinner-loader is compatible with both Class and Functional React Components.

import Loader from 'react-spinner-loader';
const App = () => {
    const [loader, setLoader] = useState(true);
    return (
        <div>
            <Loader show = {loader}>
        </div>
    )
}

Available Custom Props

By default, react-spinner-loader comes up with the following properties. You could use the following to customize your loader out of the box.

Example

Prop : type

If you wish to show a full page loader without the background, then user type = "box"

<Loader type = "box"/>

To show a full page loader with blur background, use type = "body"

<Loader type = "body"/>

To show inline loaders, use type = "inline". This is the default value.

<Loader type = "inline"/>

Many times, we would want to provide a loading message along with the loader to help user understand why is it taking a lot of time to load the data. To achieve this, you could pass custom loading string with message prop. Alternatively, you could also configure the message styling with messageStyling prop.

<Loader 
    message = "Loading Message"
    messageStyling = {{
        color: blue
    }}
/>

Prop : stack

Prop : spinnerStyle

Want to align the spinner with your website theme? You could always use spinnerStyle prop to customize the loader colors.

<Loader 
    spinnerStyle = {{
        primary: '#46B597',
        secondary: '#2D866D'
    }}
/>

Prop : spinnerSize

Increase or Decrease the spinner size with spinnerSize

<Loader spinnerSize = "50px"/>