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