holen
Version:
Declarative fetch in React
131 lines (93 loc) • 3.04 kB
Markdown
# Holen
Declarative fetch in React
[](https://badge.fury.io/js/holen)
[](https://travis-ci.org/tkh44/holen)
[](https://codecov.io/gh/tkh44/holen)
- [Install](#install)
- [Basic Usage](#basic-usage)
## Install
```bash
npm install -S holen
```
## Basic Usage
```jsx
// Fetch on mount
<Holen url="api.startup.com/users">
{({data}) => <pre>{JSON.stringify(data, null, 2)}</pre>}
</Holen>
// Lazy fetch
<Holen lazy onResponse={handleResponse} url="api.startup.com/users">
{({fetching, data, fetch, error}) => (
<div>
<button onClick={fetch}>Load Data</button>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
)}
</Holen>
```
## Props
**body** `any`
```jsx
<Holen
body={JSON.stringify({ message: 'hello' })}
method="POST"
url="api.startup.com/users"
>
{({data}) => <pre>{JSON.stringify(data, null, 2)}</pre>}
</Holen>
```
*[MDN - Body](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Body)*
**children** `function`
Children is a function that receives an object as its only argument.
The object contains the following keys:
- fetching: `bool`
- response: `object`
- data: `object`
- error: `object`
- fetch: `function`
```jsx
<Holen url="api.startup.com/users">
{({data}) => <div>{data.name}</div>}
</Holen>
```
**credentials** `string`
*[MDN - Credentials](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Sending_a_request_with_credentials_included)*
**headers** `string`
*[MDN - Headers](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Headers)*
**lazy** `boolean`
If true then the component will **not** perform the fetch on mount.
You must use the `fetch` named argument in order to initiate the request.
```jsx
<Holen lazy url="api.startup.com/users">
{({fetching}) => {fetching && <div>Loading</div>}} // renders nothing, fetch was not started
</Holen>
```
**method** `string` - *default `GET`*
*[MDN - Method](https://developer.mozilla.org/en-US/docs/Web/API/Request/method)*
**onResponse** `function`
callback called on the response.
```jsx
const handleResponse = (error, response) => {
if (error || !response.ok) {
panic()
}
cheer()
}
<Holen
lazy
onResponse={handleResponse}
url="api.startup.com/users">
{({ data, fetch }) => (
<div>
<button onClick={fetch}>Load Data</button>
<pre>{JSON.stringify(data, null , 2)}</pre>
</div>
)}
</Holen>
```
**transformResponse** `function` - *default `data => data`*
The `transformResponse` prop is a function that can be used to massage the response data. It receives one argument, `data`, and by default, performs an identity operation, returning the data passed to it.
**type** `string` - *default `json`*
Fetch method applied to the response. One of `json`, `text`, or `blob`.
**url** `string`
url of the request.