LoaderQuark for React

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

Installation

npm install @quarks-js/loader --save

Setup

AnyComponent.jsx

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

Basic Usage

AnyComponent.jsx

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

const AnyComponent = () => {
  const [loading, setLoading] = React.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>
    </>
  ) 
}

export default AnyComponent