react-use-data-loader

React hook for loading data

Installation

Using npm:

$ npm install --save react-use-data-loader

Using yarn:

$ yarn add react-use-data-loader

Since this module uses React's upcoming Hooks feature, to try this out you'll need to install the 16.7.0-alpha.0 version of react and react-dom:

$ yarn add react@16.7.0-alpha.0 react-dom@16.7.0-alpha.0

Usage

import React from 'react'
import { useDataLoader } from 'react-use-data-loader'

async function getData(id) {
  /* async api call */

  return 'item ' + id
}

function Example({ id }) {
  const { data, error, loading, retry } = useDataLoader(getData, id)

  if (loading) {
    return <div>loading...</div>
  }

  if (error) {
    return <div>Error</div>
  }

  return <ViewData data={data} />
}

function App() {
  return <Example id={3} />
}

API

useDataLoader(getData: GetData, ...args: Args) => ({
  data: Data | null,
  error: Error | null,
  loading: boolean,
  retry: Retry,
})

type GetData = (...args: Args) => Promise<Data>
type Retry = () => void