@quarks-js/loader v1.0.1

LoaderQuark for React

Quark Loader

This quark is a simple loader plugin with adaptation for React.

Provides clean design and logic for usage with or without the React Suspension component.

Installation

npm install @quarks-js/loader --save

Setup

Install the package and use import statement in your application

import { Loader } from "@quarks-js/loader"

Basic Usage

Your jsx|tsx file:

import { Loader } from "@quarks-js/loader";
import { useState } from "react";

function Component() {
  const [loading, setLoading] = useState(false)
    
  //...
  
  // Perform some data loading, for example some api call
  useEffect(() => {
    setLoading(true) // Set loading to true in the beginning
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        // Do something with the data
      })
      .catch(error => console.error(error))
      .finally(() => setLoading(false)) // After the data is loaded, set loading to false
  }, [...])
  
  return (
    <>
      <Loader loading={loading} type={"spinner"} color={"#7842f5"}>
        <div>
          {/* ...Content to show after loading is done... */}
        </div>  
      </Loader>
    </>
  ) 
}

Docs

Full docs with more examples are coming soon, sorry for the inconvenience.

Source code at GitHub Repository

Support

If you found this Quark useful, please support us by starring its GitHub repository.