tessl/npm-react-top-loading-bar

A highly customizable React top-loading bar component with hook-based, ref-based, and state-based control patterns.

1.25x

Overview

Eval results

Files

Hook-based Control

Name: tessl/npm-react-top-loading-bar
Rating: 0.64 (1 reviews)
Author: tessl

The hook-based approach provides declarative loading bar control through React context, offering a clean API for components that need to trigger loading states without direct access to the loading bar component.

Setup

Wrap your application or relevant component tree with LoadingBarContainer:

function LoadingBarContainer(props: {
  children: React.ReactNode;
  props?: Omit<IProps, "progress">;
}): JSX.Element;

import { LoadingBarContainer } from "react-top-loading-bar";

const App = () => (
  <LoadingBarContainer
    props={{
      color: "blue",
      height: 3,
    }}
  >
    <MyAppComponents />
  </LoadingBarContainer>
);

useLoadingBar Hook

Access loading bar controls from any component within the container:

function useLoadingBar(props?: IProps): {
  start(type?: "continuous" | "static"): void;
  complete(): void;
  increase(value: number): void;
  decrease(value: number): void;
  getProgress(): number;
};

Hook Methods

/**
 * Start the loading bar
 * @param type - Loading mode: "continuous" (auto-increment) or "static" (fixed)
 */
start(type?: "continuous" | "static"): void;

/**
 * Complete the loading bar (animate to 100%)
 */
complete(): void;

/**
 * Increase progress by specified value
 * @param value - Amount to increase (0-100)
 */
increase(value: number): void;

/**
 * Decrease progress by specified value  
 * @param value - Amount to decrease (0-100)
 */
decrease(value: number): void;

/**
 * Get current progress value
 * @returns Current progress (0-100)
 */
getProgress(): number;

Usage Examples

Basic Loading Control

import { useLoadingBar } from "react-top-loading-bar";

const ApiDataComponent = () => {
  const { start, complete } = useLoadingBar();

  const fetchData = async () => {
    start("continuous");
    try {
      await fetch("/api/data");
      complete();
    } catch (error) {
      complete();
    }
  };

  return <button onClick={fetchData}>Load Data</button>;
};

Progress Manipulation

const ProgressControlComponent = () => {
  const { start, increase, decrease, complete, getProgress } = useLoadingBar();

  return (
    <div>
      <button onClick={() => start("static")}>Start Static</button>
      <button onClick={() => increase(20)}>+20%</button>
      <button onClick={() => decrease(10)}>-10%</button>
      <button onClick={() => complete()}>Complete</button>
      <span>Progress: {getProgress()}%</span>
    </div>
  );
};

Multiple Loading States

const MultiStepProcess = () => {
  const { start, increase, complete } = useLoadingBar();

  const runMultiStepProcess = async () => {
    start("static"); // Start at random value
    
    // Step 1
    await step1();
    increase(25);
    
    // Step 2  
    await step2();
    increase(25);
    
    // Step 3
    await step3();
    increase(25);
    
    // Complete
    complete();
  };

  return <button onClick={runMultiStepProcess}>Run Process</button>;
};

Container Props Configuration

Configure default loading bar appearance through container props:

<LoadingBarContainer
  props={{
    color: "#ff6b6b",
    height: 4,
    shadow: true,
    loaderSpeed: 300,
    transitionTime: 400,
  }}
>
  <App />
</LoadingBarContainer>

Hook Props Override

Override container defaults by passing props to the hook:

const { start, complete } = useLoadingBar({
  color: "green", // Overrides container color
  height: 5,      // Overrides container height
});

Error Handling

The hook will throw an error if used outside of a LoadingBarContainer:

// This will throw an error
const { start } = useLoadingBar(); // Error: must be used within LoadingBarContainer

Always ensure components using useLoadingBar are wrapped in a LoadingBarContainer.

Install with Tessl CLI

npx tessl i tessl/npm-react-top-loading-bar

tessl/npm-react-top-loading-bar