https://github.com/smmoosavi/react-use-data-loader

React hook for loading data
https://github.com/smmoosavi/react-use-data-loader

load-data react react-hooks

Last synced: 3 months ago
JSON representation

React hook for loading data

• Host: GitHub
• URL: https://github.com/smmoosavi/react-use-data-loader
• Owner: smmoosavi
• License: mit
• Created: 2018-11-06T07:19:24.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-09-21T07:54:33.000Z (almost 3 years ago)
• Last Synced: 2024-01-24T07:04:13.967Z (5 months ago)
• Topics: load-data, react, react-hooks
• Language: JavaScript
• Size: 1.12 MB
• Stars: 23
• Watchers: 3
• Forks: 2
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-react-hooks - `react-use-data-loader`
• awesome-react-hooks-cn - `react-use-data-loader`
• awesome-react-hooks - `react-use-data-loader`
• fucking-awesome-react-hooks - `react-use-data-loader`
• awesome-react-hooks - `react-use-data-loader`

README

        
# 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 [email protected] [email protected]

```

# Usage

```jsx

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

  }


  if (error) {

    return 
Error

  }


  return 

}

function App() {

  return 

}

```

# API

```ts

useDataLoader(getData: GetData, ...args: Args) => ({

  data: Data | null,

  error: Error | null,

  loading: boolean,

  retry: Retry,

})

type GetData = (...args: Args) => Promise

type Retry = () => void

```