React Loader Headless

A light-weight global loader context provider library for React JS.

Installation

Install react-loader-headless with npm

  npm install react-loader-headless

Install react-loader-headless with yarn

  yarn add react-loader-headless

Basic Example

# Loader Provider

Add Loader Provider in the entry file of your project.

  import { LoaderProvider } from 'react-loader-headless'

  <LoaderProvider>
    <App />
  </LoaderProvider>

# useLoader Hook

Use the useLoader hook to access the props.

  import { useLoader } from 'react-loader-headless'

  const { loading, loaderMessages, startLoader, stopLoader } = useLoader();

| Key | Type | Description | | :-------- | :------- | :-------------------------------- | | loading | boolean | Provides loader state in boolean, i.e, true when loader is active and false when inactive. | | loaderMessages | string[] | Provides messages as an array of strings passed with startLoader method. | | startLoader | (...args: string[]) => void | Method to start loader and accepts n number of strings that is received as loaderMessages. | | stopLoader | () => void | Method to stop loader. |

Example

  startLoader("Hello", "World", ...)    // loading = true and loaderMessages = ["Hello", "World", ...]

  stopLoader()    // loading = false and loaderMessages = []

Features

• Very Light-weight
• Works with any UI library or custom loaders
• Extremely Customizable
• Single loader for complete application; i.e; improves uniformity and avoids redundancy.

Authors

• @idol51

Appendix

Any additional information goes here