Skip to content
šŸ¶ React hook for making isomorphic http requests
Branch: master
Clone or download
Latest commit 9271811 Apr 25, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples cleaning house Apr 23, 2019
src Bootstrap jest for testing and add extremely simple test (#8) Apr 25, 2019
.gitignore
.jestconfig.json Bootstrap jest for testing and add extremely simple test (#8) Apr 25, 2019
README.md Update README.md Apr 25, 2019
babel.config.js Bootstrap jest for testing and add extremely simple test (#8) Apr 25, 2019
license.md Create license.md (#6) Apr 23, 2019
package.json Bootstrap jest for testing and add extremely simple test (#8) Apr 25, 2019
yarn.lock Bootstrap jest for testing and add extremely simple test (#8) Apr 25, 2019

README.md

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

Installation

yarn add use-http

or

npm i -S use-http

Usage

Basic Usage

import useFetch from 'use-http'

function App() {
  const options = { // accepts all `fetch` options
    onMount: true // will fire on componentDidMount
  }
  
  var [data, loading, error, request] = useFetch('https://example.com', options)
  
  // want to use object destructuring? You can do that too
  var { data, loading, error, request } = useFetch('https://example.com')
  
  const postData = () => {
    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>
    </>
  )
}

Destructured methods

var [data, loading, error, { post }] = useFetch('https://example.com')

var { data, loading, error, post } = useFetch('https://example.com')

post({
  no: 'way',
})

Relative routes

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

request.post('/todos', {
  no: 'way'
})

Helper hooks

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({
  yes: 'way',
})

Coming Soon: abort

const { data, loading, request } = useFetch({
  baseUrl: `https://api.github.com/search`
})

const searchGithub = e => request.get(`/repositories?q=${e.target.value || "''"}`)

<>
  <input onChange={searchGithub} />
  <button onClick={request.abort}>Abort</button>
  {loading ? 'Loading...' : <code><pre>{data}</pre></code>}
</>

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
})

or

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

// 1 caveat, only use `request.delete`, don't destructure like below
// that's what `del` is for since `delete` is a key word
const { get, post, patch, put, del, delete } = request

Credits

use-http is heavily inspired by the popular http client axios

Todos

  • Make abortable (add abort to abort the http request)
  • Make work with React Suspense current example WIP
  • Allow option to fetch on server instead of just having loading state
  • Allow option for callback for response.json() vs response.text()
  • add timeout
  • error handling if no url is passed
  • tests
  • port to typescript
  • badges, I like the way these guys do it
You canā€™t perform that action at this time.