Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork30
Complex Loader Management Hook for React Applications
License
f/react-wait
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Complex Loader Management Hook forReact.
Read theMedium post "Managing Complex Waiting Experiences on Web UIs".
react-wait is aReact Hook helps to manage multiple loading states on the page without any conflict. It's based on avery simple idea that manages anArray of multiple loading states. Thebuilt-in loader component listens its registered loader and immediately become loading state.
React has its own Suspense feature to manage all the async works. For now it only supports code-splitting (not data-fetching).
useWait allows you to manage waiting experiences much more explicitly andnot only for Promised/async patterns but also complete loading management.
Here's a quick overview that what'suseWait for:
import{useWait,Waiter}from"react-wait";functionA(){const{ isWaiting}=useWait();return(<div>{isWaiting("creating user") ?"Creating User..." :"Nothing happens"}</div>);}functionB(){const{ anyWaiting}=useWait();return(<div>{anyWaiting() ?"Something happening on app..." :"Nothing happens"}</div>);}functionC(){const{ startWaiting, endWaiting, isWaiting}=useWait();functioncreateUser(){startWaiting("creating user");// Faking the async work:setTimeout(()=>{endWaiting("creating user");},1000);}return(<buttondisabled={isWaiting("creating user")}onClick={createUser}><Waiton="creating user"fallback={<Spinner/>}> Create User</Wait></button>);}ReactDOM.render(<Waiter><C/></Waiter>,document.getElementById("root"));
If you are atry and learn developer, you can start trying thereact-wait now usingcodesandbox.io.
yarn add react-wait
import{Waiter,useWait}from"react-wait";functionUserCreateButton(){const{ startWaiting, endWaiting, isWaiting, Wait}=useWait();return(<buttononClick={()=>startWaiting("creating user")}disabled={isWaiting("creating user")}><Waiton="creating user"fallback={<div>Creating user!</div>}> Create User</Wait></button>);}
And you should wrap yourApp withWaiter component. It's actually aContext.Provider that provides a loading context to the component tree.
constrootElement=document.getElementById("root");ReactDOM.render(<Waiter><App/></Waiter>,rootElement);
$ yarn add react-wait# or if you using npm$ npm install react-waitreact-wait provides some helpers to you to use in your templates.
Returns boolean value if any loader exists in context.
const{ anyWaiting}=useWait();return<buttondisabled={anyWaiting()}>Disabled while waiting</button>;
Returns boolean value if given loader exists in context.
const{ isWaiting}=useWait();return(<buttondisabled={isWaiting("creating user")}> Disabled while creating user</button>);
Starts the given waiter.
const{ startWaiting}=useWait();return<buttononClick={()=>startWaiting("message")}>Start</button>;
Stops the given waiter.
const{ end}=useWait();return<buttononClick={()=>endWaiting("message")}>Stop</button>;
functionComponent(){const{ Wait}=useWait();return(<Waiton="the waiting message"fallback={<div>Waiting...</div>}> The content after waiting done</Wait>);}
Better example for abutton with loading state:
<buttondisabled={isWaiting("creating user")}><Waiton="creating user"fallback={<div>Creating User...</div>}> Create User</Wait></button>
With reusable loader components, you will be able to use custom loader components as example below. This will allow you to create betteruser loading experience.
functionSpinner(){return<imgsrc="spinner.gif"/>;}
Now you can use your spinner everywhere usingwaiting attribute:
<buttondisabled={isWaiting("creating user")}><Waiton="creating user"fallback={<Spinner/>}> Create User</Wait></button>
To keep your code DRY you can create aWaiting Context usingcreateWaitingContext.
functionCreateUserButton(){const{ createWaitingContext}=useWait();// All methods will be curried with "creating user" on.const{ startWaiting, endWaiting, isWaiting, Wait}=createWaitingContext("creating user");functioncreateUser(){startWaiting();setTimeout(endWaiting,1000);}return(<Buttondisabled={isWaiting()}onClick={createUser}><Waitfallback="Creating User...">Create User</Wait></Button>);}
- Fatih Kadir Akın, (creator)
Sincereact-wait based on a very simple idea, it can be implemented on other frameworks.
- vue-wait: Multiple Process Loader Management for Vue.
- dom-wait: Multiple Process Loader Management for vanilla JavaScript.
MIT ©Fatih Kadir Akın
About
Complex Loader Management Hook for React Applications
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors4
Uh oh!
There was an error while loading.Please reload this page.