react-request with TS

api.tsx

import React from 'react';

import { Fetch, FetchSFCProps } from 'react-request';

interface User {
  id: number;
  name: string;
  username: string;
  email: string;
  address: {
    street: string;
    suite: string;
    city: string;
    zipcode: string;
    geo: {
      lat: string;
      lng: string;
    };
  };
  phone: string;
  website: string;
  company: {
    name: string;
    catchPhrase: string;
    bs: string;
  };
}

/**
 * Get all user
 */
const GetUsers = (props: FetchSFCProps<User[]>) => (
  <Fetch url="https://jsonplaceholder.typicode.com/users" {...props} />
);

export default {
  GetUsers,
};

usage.tsx

import Api from './api';

render() {
  return (
    <Api.GetUsers lazy>
      {({ fetching, data, doFetch }) => {
        if (fetching) return <h1>Loading...</h1>;
        if (!data) return <Button onClick={_e => doFetch()}>Load users</Button>;
        return data.map(u => <h4 key={u.id}>{u.name}</h4>);
      }}
    </Api.GetUsers>
  );
}