Fetch

The Fetch component abstracts away the mechanics of handling what to render in the context of a fetch request. The 3 states PENDING, SUCCESS and FAILURE are implemented.

Install

yarn add @gdo-bzh/Fetch @gdo-bzh/use-fetch react

Usage

import React from 'react'

type Quote = {
  id: number
  starWarsQuote: string
  faction: number
}

export const Example: React.FC<Props> = () => (
  <Fetch<Quote>
    request="http://swquotesapi.digitaljedi.dk/api/SWQuote/RandomStarWarsQuote"
    RenderPending={()=><div>...</div>)}
    RenderSuccess={({ data }) => <div>{data.starWarsQuote}</div>}
    RenderFailure={({ message }) => <div>{message}</div>}
  />
)

Types

/**
 * T describe the type of the data
 */
type Props<T> = {
  /**
   * the request object ([more info here](https://developer.mozilla.org/en-US/docs/Web/API/Request))
   */
  request: RequestInfo
  /**
   * the component to render when the operation is pending
   */
  RenderPending: React.ComponentType
  /**
   * the component to render when the operation has completed successfullly
   */
  RenderSuccess: React.ComponentType<{ data: T }>
  /**
   * the component to render when the operation has failed to complete
   */
  RenderFailure: React.ComponentType<{ message: string }>
}

License

MIT © gdo-bzh