Have ideas to improve npm?Join in the discussion! »

    use-suspense

    0.1.59 • Public • Published

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

    Destructured methods

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

    Relative routes

    const 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',
    })

    Abort

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

    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,
      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`
    = request

    Credits

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

    Feature Requests/Ideas

    If you have feature requests, let's talk about them in this issue!

    Todos

    • 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
    • add debounce
    • if 2nd param of post or one of the methods is a string treat it as query params
    • error handling if no url is passed
    • tests
    • port to typescript
    • badges, I like the way these guys do it

    Install

    npm i use-suspense

    DownloadsWeekly Downloads

    0

    Version

    0.1.59

    License

    MIT

    Unpacked Size

    3.37 MB

    Total Files

    22

    Last publish

    Collaborators

    • avatar