"Collection" of custom React Hooks.
- React 16.8.0 or higher
npm install bananahooks
or
yarn add bananahooks
yarn install
yarn test
yarn build
yarn build
npm version [patch|minor|major]
npm publish
Custom React Hook that properly awaits a promise to resolve.
It automatically 'unsubscribes' if the component is unmounted.
Here's an example on CodeSandbox:
Import the function:
import { usePromise } from 'bananahooks';
const App = ({ client }) => {
const [bananas] = usePromise(client.fetchBananas, [])
return (
<ul>
{bananas.map(banana => <li>{banana}<li>)}
</ul>
)
}
The first render will use the empty array passed as a default value.
The next render will -probably- have some bananas in the bananas
array.
Note that there is no need to useState
to keep track of bananas
.
Handling errors and loading state.
const App = ({ client }) => {
const [bananas, error, pending] = usePromise(client.fetchBananas, [])
return (
<ul>
{pending && <li>Loading...</li>}
{!pending && error && <li>Error! {error.toString()}</li>)}
{!pending && !error && bananas.map(banana => <li>{banana}<li>)}
</ul>
)
}
On the first render pending
is true and the "loading" message is rendered.
The next time the promise will have resolved or rejected.
error
will be 'truthy' if the promise was rejected, and error message can be displayed.
In most cases the promise will have resolved and the bananas
array is displayed.
This project was bootstrapped with TSDX:
This project was bootstrapped with TSDX.
Below is a list of commands you will probably find useful.
Runs the project in development/watch mode. Your project will be rebuilt upon changes. TSDX has a special logger for you convenience. Error messages are pretty printed and formatted for compatibility VS Code's Problems tab.
Your library will be rebuilt if you make edits.
Bundles the package to the dist
folder.
The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
Runs the test watcher (Jest) in an interactive mode. By default, runs tests related to files changed since the last commit.