🐶 React hook for making isomorphic http requests
yarn add use-http or npm i -S use-httpimport useFetch from 'use-http' function Todos() { const options = { // accepts all `fetch` options onMount: true // will fire on componentDidMount } const todos = useFetch('https://example.com/todos', options) const addTodo = () => { todos.post({ title: 'no way', }) } if (todos.error) return 'Error!' if (todos.loading) return 'Loading...' return ( <> <button onClick={addTodo}>Add Todo</button> {todos.data.map(todo => ( <div key={todo.id}>{todo.title}</div> )} </> ) }var [data, loading, error, request] = useFetch('https://example.com') // want to use object destructuring? You can do that too var { data, loading, error, request } = useFetch('https://example.com') request.post({ no: 'way', })const request = useFetch({ baseUrl: 'https://example.com' }) request.post('/todos', { no: 'way' })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', })
const githubRepos = useFetch({ baseUrl: `https://api.github.com/search/repositories?q=` }) // the line below is not isomorphic, but for simplicity we're using the browsers `encodeURI` const searchGithubRepos = e => githubRepos.get(encodeURI(e.target.value)) <> <input onChange={searchGithubRepos} /> <button onClick={githubRepos.abort}>Abort</button> {githubRepos.loading ? 'Loading...' : githubRepos.data.items.map(repo => ( <div key={repo.id}>{repo.name}</div> ))} </>| 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, delete // don't destructure `delete` though, it's a keyword del, // <- that's why we have this (del). or use `request.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 }) const { get, post, patch, put, delete // don't destructure `delete` though, it's a keyword del, // <- that's why we have this (del). or use `request.delete` } = requestuse-http is heavily inspired by the popular http client axios
If you have feature requests, let's talk about them in this issue!
- Make abortable (add
abortto abort the http request) - Make work with React Suspense current example WIP
- Allow option to fetch on server instead of just having
loadingstate - Allow option for callback for response.json() vs response.text()
- add
timeout - add
debounce - if 2nd param of
postor one of the methods is astringtreat it as query params - error handling if no url is passed
- tests
- port to typescript
- badges, I like the way these guys do it