atomic-state / http-react Goto Github PK

Http React is a React hooks library for data fetching. It's built on top of the native Fetch API.

With one hook call, you get all the information about a request that you can use to build UIs that are consistent and performant:

import useFetch from 'http-react'

// This is the default
const fetcher = (url, config) => fetch(url, config)

export default function App() {
  const { data, loading, error, responseTime } = useFetch('/api/user-info', {
    refresh: '30 sec',
    fetcher
  })

  if (loading) return <p>Loading</p>

  if (error) return <p>An error ocurred</p>

  return (
    <div>
      <h2>Welcome, {data.name}</h2>
      <small>Profile loaded in {responseTime} miliseconds</small>
    </div>
  )
}

It supports many features that are necessary in modern applications, while giving developers full control over the request configuration:

• Server-Side Rendering
• Server actions
• React Native
• Request deduplication
• Suspense
• Refresh
• Retry on error
• Pagination
• Local mutation (Optimistic UI)
• qraphql

and more!

npm install --save http-react

Or

yarn add http-react

For production apps

<!-- Add React and ReactDOM -->
<script
  src="https://unpkg.com/[email protected]/umd/react.production.min.js"
  crossorigin
></script>

<script
  src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"
  crossorigin
></script>

<!-- Add Http React -->
<script src="https://unpkg.com/http-react/dist/browser/http-react.min.js"></script>

Getting started