https://github.com/tkh44/holen

Declarative fetch for React
https://github.com/tkh44/holen

declarative fetch react react-fetch request response

Last synced: 3 days ago
JSON representation

Declarative fetch for React

• Host: GitHub
• URL: https://github.com/tkh44/holen
• Owner: tkh44
• License: mit
• Created: 2017-05-03T18:42:00.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-01-21T20:53:52.000Z (almost 6 years ago)
• Last Synced: 2024-10-18T23:12:00.715Z (2 months ago)
• Topics: declarative, fetch, react, react-fetch, request, response
• Language: JavaScript
• Size: 35.2 KB
• Stars: 150
• Watchers: 4
• Forks: 16
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-render-props - holen
• awesome-react-render-props - holen

README

        


# Holen

Declarative fetch in React

[![npm version](https://badge.fury.io/js/holen.svg)](https://badge.fury.io/js/holen)

[![Build Status](https://travis-ci.org/tkh44/holen.svg?branch=master)](https://travis-ci.org/tkh44/holen)

[![codecov](https://codecov.io/gh/tkh44/holen/branch/master/graph/badge.svg)](https://codecov.io/gh/tkh44/holen)

-   [Install](#install)

-   [Basic Usage](#basic-usage)

## Install

```bash

npm install -S holen

```

## Basic Usage

```jsx

// Fetch on mount

  {({data}) => 
{JSON.stringify(data, null, 2)}
}


// Lazy fetch

  {({fetching, data, fetch, error}) => (

    


      Load Data

      
{JSON.stringify(data, null, 2)}

    

  )}


```

## Props

**body** `any`

```jsx

  {({data}) => 
{JSON.stringify(data, null, 2)}
}


```

*[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

  {({data}) => 
{data.name}
}


```

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

  {({fetching}) => {fetching && 
Loading
}} // renders nothing, fetch was not started


```

**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()

}

  {({ data, fetch }) => (

    


      Load Data

      
{JSON.stringify(data, null , 2)}

    

  )}


```

**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](https://developer.mozilla.org/en-US/docs/Web/API/Body) applied to

the response. One of `json`, `text`, `blob`, `arrayBuffer` or `formData`.

**url** `string`

url of the request.