use-http

useFetch

🐶 React hook for making isomorphic http requests

Need to fetch some data? Try this one out. It's an isomorphic fetch hook. That means it works with SSR (server side rendering).

Examples

• Code Sandbox Example

Installation

yarn add use-http

Usage

import useFetch from 'use-http'

function App() {
  // add whatever other options you would add to `fetch` such as headers
  const options = {
    onMount: true // will fire on componentDidMount
  }
  
  var [data, loading, error, request] = useFetch('https://example.com', options)
  
  // if you want to access the http methods directly using array destructuring, just do
  var [data, loading, error, { get, post, patch put, del }] = useFetch('https://example.com', options)
  
  // want to use object destructuring? You can do that too
  var { data, loading, error, request, get, post, patch, put, del } = useFetch('https://example.com')
  
  const postData = () => {
    post({
      no: 'way',
    })
    // OR
    request.post({
      no: 'way',
    })
  }

  if (error) return 'Error!'
  if (loading) return 'Loading!'
  
  return (
    <>
      <button onClick={postData}>Post Some Data</button>
      <code>
        <pre>{data}</pre>
      </code>
    </>
  )
}

You can also do relative routes

const [data, loading, error, request] = useFetch({
  baseUrl: 'https://example.com'
})

request.post('/todos', {
  id: 'someID',
  text: 'this is what my todo is'
})

Or you can use one of the nice helper hooks. All of them accept the second options parameter.

import { useGet, usePost, usePatch, usePut, useDelete } from 'use-http'

const [data, loading, error, patch] = usePatch({
  url: 'https://example.com',
  headers: {
    'Content-type': 'application/json; charset=UTF-8'
  }
})

patch({
  no: 'way'
})

Hooks

Option	Description
useFetch	The base hook
useGet	Defaults to a GET request
usePost	Defaults to a POST request
usePut	Defaults to a PUT request
usePatch	Defaults to a PATCH request
useDelete	Defaults to a DELETE request

Options

This is exactly what you would pass to the normal js fetch, with a little extra.

Option	Description	Default
onMount	Once the component mounts, the http request will run immediately	false
baseUrl	Allows you to set a base path so relative paths can be used for each request :)	empty string

const {
  data,
  loading,
  error,
  request,
  get,
  post,
  patch,
  put,
  del,
  // delete
} = useFetch({
  url: 'https://example.com',
  baseUrl: 'https://example.com',
  onMount: true
})

Todos

• Make abortable (add abort to abort the http request)
• Make work with React Suspense
• Allow option to fetch on server instead of just having loading state
• Allow option for callback for response.json() vs response.text()