react-use-async-loading

Made with create-react-library

Install

npm install --save react-use-async-loading

Usage

Easy way to manage bool state to block buttons or show spinner/load data Just decorate promise and the bool will automatically switch

import {useAsyncLoading} from "react-use-async-loading";


const Page = () => {
  const [loading, {registerPromise}] = useAsyncLoading(true) // by default - false;

  useEffect(() => {
    // Show spinner while fetching data from server
    registerPromise(
        fetch("/data.json")
        .then(data => {
        // ...save data to state
      })
    )
  }, [registerPromise])

  if (loading)return (<Spinner/>)

  return (<div>Data was loaded</div>)
}

import {useAsyncLoading} from "react-use-async-loading";


const Form = () => {
  const [saving, {registerPromise}] = useAsyncLoading();

  const onSubmit = values => {
    // disable submit button while doing request
    registerPromise(
      axios.post(`/register`, values)
    )
  }

  return (<Form disabled={saving} onSubmit={onSubmit} />)
}

License

MIT © Link to repository