Awesome Open Source
Awesome Open Source

Holen

Declarative fetch in React

npm version Build Status codecov

Install

npm install -S holen

Basic Usage

// 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

<Holen
  body={JSON.stringify({ message: 'hello' })}
  method="POST"
  url="api.startup.com/users"
>
  {({data}) => <pre>{JSON.stringify(data, null, 2)}</pre>}
</Holen>

MDN - 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
<Holen url="api.startup.com/users">
  {({data}) => <div>{data.name}</div>}
</Holen>

credentials string

MDN - Credentials

headers string

MDN - 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.

<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

onResponse function

callback called on the response.

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

The body method applied to the response. One of json, text, blob, arrayBuffer or formData.

url string

url of the request.

Alternatives To Holen
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,072,919
Reactjs (164,328
Fetch (8,867
Mdn (832
React Fetch (7