use-fetch

this hook is charged to fetch data using the fetch API (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). React Hooks are not be intended for data fetching in React. Instead, a feature called Suspense will be in charge for it. The following walkthrough is nonetheless funny.

Install

yarn add @gdo-bzh/use-fetch react

Usage

import React from 'react'

type User = {
  name: string
  email: string
  avatar: string
}

const Example = () => {
  const {
    state: { isLoading, isError, isAborted, error, data },
    setInput,
    abort
  } = useFetch<User[]>('/getUsers', {}, [])
}

Types

type State<T> = {
  isLoading: boolean
  isError: boolean
  isAborted: boolean
  error?: Error
  data: T
}

/**
 * hook type
 */
export type UseFetch = {
  <T>(input: RequestInfo, init: RequestInit, initialData: T): {
    state: State<T>
    setInput: React.Dispatch<React.SetStateAction<RequestInfo>>
    abort: () => boolean
  }
}

License

MIT © gdo-bzh