react-multi-busy
React Context library for controlling multiple busy states (spinners, progress bars, etc.) in an application
![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)
Examples
Install
npm install --save react-multi-busy
Usage
Wrap your component tree w/ the MultiBusyProvider
:
import ReactDOM from 'react-dom'
import { MultiBusyProvider } from 'react-multi-busy'
ReactDOM.render(
<CssBaseline>
<MultiBusyProvider>
<App />
</MultiBusyProvider>
</CssBaseline>,
document.getElementById('root')
)
Implement the useMultiBusy
custom hook in any component that you want to control the busy state for:
import { useMultiBusy } from 'react-multi-busy'
export const SomeComponent = () => {
const {isBusy, startBusy, endBusy} = useMultiBusy()
const busy = isBusy()
return <Button {...{
color: 'primary',
variant: 'contained',
onClick: goFetchSomething(startBusy, endBusy)
}} >
<span>{
`${ busy ? 'I\'m busy' : 'Click Me' }`
}</span>
{ busy && <CircularProgress {...{
size: '1em',
}} /> }
</Button>
}
Finally, make startBusy() and endBusy()
methods available to whatever it is that you want to use to control the state of:
const goFetchSomething = (startBusy, endBusy) => async () => {
startBusy()
const result = await someService()
endBusy()
return result
}
License
MIT © RavenHursT