React-loader-headless NPM

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.