🐶 React hook for making isomorphic http requests
yarn add use-httpimport 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' })| 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 |
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 })- Make abortable (add
abortto abort the http request) - Make work with React Suspense
- Allow option to fetch on server instead of just having
loadingstate - Allow option for callback for response.json() vs response.text()
