JSPM – http-react@3.8.3

Package Exports

http-react/dist/utils
http-react/dist/utils/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (http-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

HTTP React

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

Overview

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 fetcher.
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 also works with Next.js' server functions:

// actions.ts
'use server'

import { actionData } from 'http-react'

export async function getData({ id }: { id: number }) {
  return actionData({
    foo: 'bar'
  })
}

// page.tsx
'use client'
import { useAction } from 'http-react'

import { getData } from '@/actions'

export default function Page() {
  // data has static typing inferred from the action result
  const { data, isPending, error } = useAction(getData, {
    params: {
      id: 1 // This will show an error if id is not a number
    }
  })

  return isPending ? (
    <p>Loading...</p>
  ) : error ? (
    <p>Something went wrong</p>
  ) : (
    <div>
      <h2>Welcome</h2>
      <p>{data.foo}</p>
    </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!

Installation:

npm install --save http-react

yarn add http-react

Getting started