React-loading-management was initially developed to use in SatViewer project

Overview

React-Loading-Management

CodeQL Publish Package to npmjs

React-loading-management was initially developed to use in SatViewer project. But was brought as a standalone package to npm. The package purpose is to make managing loading state for async api requests a breeze.

  • Full Typescript support out of the box
  • Very small dependency
  • No intention to reinvent the wheel
    • React hooks
    • React Context API

Installation

You can install this package from the npm repository by using one of the following commands:

# npm
npm install react-loading-management

# yarn
yarn add react-loading-management

How to use

As this package is using the react context api, we need to wrap our application in a provider to use the loading context.

React

...
); }">
// app.tsx / app.js

function App() {
  return (
    <LoadingProvider>
        <div className="App">
        ...
        </div>
    <LoadingProvider>
  );
}

NextJS

// _app.tsx / _app.js

function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
    return (
        <LoadingProvider>
            <Component {...pageProps} />
        </LoadingProvider>
    );
}

After that we can indicate we are loading at the moment by deconstruct the necessary functions out of our context.

// some react component where we want to display we are loading something. Here a Next.js page is used, but could be an arbitrary component.

const Home: NextPage = () => {
    const { setLoading, stopLoading, isLoading } = useLoadingContext();

    const reject = (ms: number) => new Promise((_resolve, reject) => setTimeout(reject, ms));

    const handleClickWithReject = async () => {
        try {
            setLoading();
            console.log('start');
            await reject(5000);
        } catch {
            console.log('rejected');
        } finally {
            stopLoading();
        }
    };

    return (
        <div>
            {isLoading && <DefaultSpinner />}
            <button onClick={handleClick}>Load async</button>
        </div>
    );
};

TODO

  • Test code against bugs.
  • Finish documentation.
  • Method for encapsulating Promises while loading, so that no manual stop of loading is necessary.

Credits

The default loading indicator was taken from: http://samherbert.net/svg-loaders/

You might also like...
A  real estate website built using React and Redux for State Management
A real estate website built using React and Redux for State Management

Rea Estate Website This is a website build using react and redux for state management. I used the compound component pattern of react. This website in

A state management library for React, heavily inspired by vuex
A state management library for React, heavily inspired by vuex

A state management library for React, heavily inspired by vuex

⛵️ A React library for Solana account management and transaction processing.

sail ⛵️ A React library for Solana account management and transaction handling. Usage import { SailProvider } from "@saberhq/sail";

Production Ready State Management for React

Kea v2 Open the documentation and read from there. Thank you to our backers! Contributors This project exists thanks to all the people who contribute.

Studies about Software Architeture in React - basics of server-side rendering, state management and code splitting

Studies about Software Architeture in React - basics of server-side rendering, state management and code splitting

Simple and powerful state management in React and Preact
Simple and powerful state management in React and Preact

Remini Simple and powerful state management in React and Preact Easy to learn Small and quick From tiny to complex apps Get started At first you have

Inteliver React SDK. Inteliver is an image management as a service.

This repository is Inteliver's official SDK for react framework. Using this SDK you can integrate your react project with inteliver image management service.

genji is A small vue state management framewok by vue3 reactivity.
genji is A small vue state management framewok by vue3 reactivity.

genji is A small vue state management framewok by vue3 reactivity. Why calls genji ? It's inspired by Overwatch. Genji flings prec

Document Management System API Backend

Document Management System View on Pivotal Tracker The system manages documents, users and roles. Each document defines access rights i.e. which roles

Releases(1.0.1)
Owner
roboh97
| Saarland University | Currently master program Computer Science | B.Sc. in Cybersecurity | Interested in space, web technologies and browser extensions |
roboh97
🏎 Open source racing game developed by everyone willing

??️ @pmndrs/racing-game Live demo (current state): https://racing.pmnd.rs/ This project is a showcase for the feasibility of React in gaming. Every th

Poimandres 2k Jan 4, 2023
Repository responsible for all code developed during the JavaScript Beginners Series

Série de Vídeos para Iniciantes em JavaScript Uma série de vídeos ensinando conc

Glaucia Lemos 622 Dec 20, 2022
Moviesflix - a Single Page Application(SPA) that was developed with ReactJS

This project is a Single Page Application(SPA) that was developed with ReactJS.

Bruno Soares 3 Jun 29, 2022
Use js to download and unzip the npm package. only supports use in the browser.

Use js to download and unzip the npm package. only supports use in the browser.

Arthur 8 Sep 29, 2022
🕹 GBA emulator on your React project - easy and powerful to use!

react-gbajs GBA emulator on your React project - easy and powerful to use! Just three steps to set it up ✨ 1 - Apply GbaProvider import { GbaProvider

Bruno Macabeus 43 Dec 23, 2022
A React JS project to make age and gender prediction using Agify.io and Genderize.io. Only for practice use and just for fun~

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Ken Tandrian 2 Nov 1, 2022
My first React project created during project-oriented training.

Twitter Built with React Built with React, Context, JavaScript, and CSS.in this React project the functional components has been used and The Material

elham salehi 3 Dec 10, 2022
This project is a frontend learning project that built with ReactJS.

CryptoArt-NFT Cryptopunk NFT is a frontend project which is built with ReactJS. The website displays the minted NFT Artworks by using OpenSea API. The

CallMeJaX 1 Feb 27, 2022
👻 Primitive, flexible state management for React

?? Primitive, flexible state management for React

Poimandres 11.4k Dec 29, 2022
A lightweight react global state management library

Reate A lightweight react global state management library. ✨ Feature Simple and easy to use, only three APIs

青湛 19 Oct 26, 2021