Nap Power: Maximum

    holen

    2.0.1 • Public • Published

    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

    Fetch method applied to the response. One of json, text, or blob.

    url string

    url of the request.

    Install

    npm i holen

    DownloadsWeekly Downloads

    7

    Version

    2.0.1

    License

    MIT

    Last publish

    Collaborators

    • tkh44