react-loader

Introduction

react-loader is a React functional component which creates a loading component that hides content while loading.

Installation

To install run the following command:

npm install @noxy/react-loader@latest

Typescript types are already available in the library so no need to get external types.

Usage

The following is an example of how to use the component:

import {Loader} from "@noxy/react-loader";
import React, {HTMLProps, useState} from "react";

function TestComponent(props: HTMLProps<HTMLDivElement>) {
  
  const [loading, setLoading] = useState<boolean>(false);
  
  return (
    <div>
      <Loader loading={loading}>
        Hello World
      </Loader>
      <button onClick={onButtonClick}>Set loading</button>
    </div>
  );
  
  function onButtonClick() {
    setLoading(!loading);
  }
}

Properties

The Loader component inherits all HTMLDivElement properties and applies them directly to the outermost element. This includes the className property for those using CSS modules.

loading: boolean

Determines if the loader should be shown.

Default value: false