react-api-request

React component for composable API requests.

This keeps the data fetching behaviour in a separate component to your rendering component.

Note: this package has a peerDependency of react@>=15.x

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import ApiRequest from 'react-api-request';
 
const ApiResults = ({ apiData }) => (
  <pre>{ JSON.stringify(apiData, null, 2) }</pre>
);
 
const App = () => (
  <ApiRequest
    component={ApiResults}
    endpoint="/users.json"
  />
);
 
render(<App />, document.getElementById('root'));

Installation

yarn add react-api-request

API

The default module export is the ApiRequest React component, with the following props available:

endpoint *

The URL which data will be fetched from. This value will be passed directly to fetch.

component *

A React component (function) that will be rendered once the data is available. If shouldRenderImmediately is true, the component will be rendered prior to data being available.

shouldRenderImmediately

Defaults to false. When true, causes the component to be rendered immediately, even before data is fetched from the endpoint. This is useful if you want to render something while the data is loading, such as a spinner.

...props

Any additional props on the ApiRequest component will be passed to the component when it is rendered.

Polyfills

This component uses fetch to grab data from the endpoint. If you need a fetch polyfill (caniuse).