Async Handler
HOC that takes an async function and returns views for loading, no-data and error states. It accepts an optional method to check a cache before the async function is run.
Install
npm install @unleashit/async-handler
Required peer dependencies: react.
Example with render prop
;; Component { return { ; }; } { return <AsyncHandler request=thisrequest> <div>data</div> </AsyncHandler> ; } ;
This will display default messages for loading, error or no results* as needed. Note that request
should return a promise with just the data part of the response so AsyncHandler can know when to display the no results component.
* no results meaning when an object with no keys or a zero length array is returned.
HOC example using cache and optional components
;; // data to fetch asynchronously, here for demo reasonsconst users = id: 1 name: 'joe' age: 30 id: 2 name: 'judy' age: 27 ; // for demonstration, normally you might use// Redux or another decoupled place to store the cache.let userCache = null; const UserList = { return <ul> data </ul> ;}; { return { ; }; } { return userCache && - userCachecacheDate <= 5 * 1000 ? userCacheusers : null; } loaderComponent: <MySpinner foo='bar' /> noResultsComponent: <div>No user"'"s found</div> <div>Oops there was a problem: JSON</div> UserList;
CSS
Basic namespaced (BEM) css can be imported: import '@unleashit/async-handler/dist/async-handler.css'
. CSS Module support is baked in. If you use CSS Modules you can import '@unleashit/async-handler/dist/async-handler.module.css'
or import your own custom module targeting the internal classes and pass to the cssModuleStyles
prop. Please see CSS in the main readme of the repo for more info.
API and Props
;
Name | Type | Description | default |
---|---|---|---|
request | () => Promise | Called if cache function exists and doesn't return a falsy value | required |
cache | () => object | any[] | false | null | Optional function that should return a cache object or null (calls the request) | n/a |
noResultsComponent | () => React.ReactNode | React component to override default no results message | Nothing found. |
errorComponent | ({ error }: {error: any} ) => React.ReactNode | React component to override default error message | default message with error displayed |
loaderComponent | () => React.ReactNode | React component to override the default loader | Loading... |
cssModuleStyles | { [key: string]: string } | CSS Module object that optionally replaces default. Class names need to match expected names. | BEM CSS |
children | (data: any) => any; | Function to be called with data if request returns with results (AsyncHandler only) | n/a |