React-fetchy NPM

react-fetchy

react-fetchy is a React component that let makes fetch call easily by using "Function as Child components" pattern. Built on top of superagent.

Example

Single

Fetch on mount

import { Fetchy } from "react-fetchy";

const PostList = () => (
  <Fetchy url="https://jsonplaceholder.typicode.com/todos">
    {({ fetch, state: { value: todos } }) => (
      <div>
        <h1>Todos</h1>
        <button onClick={fetch}>Refresh</button>
        <ul>
          {(todos || []).map(todo => <li key={todo.id}>{todo.title}</li>)}
        </ul>
      </div>
    )}
  </Fetchy>
);

See CodeSandbox

Manual fetch

const PostList = () => (
  <Fetchy>
    {({ fetch, state: { value: todos } }) => (
      <button onClick={e => {
        fetch({
          url: "https://jsonplaceholder.typicode.com/todos",
        });
      }}>Fetch me</button>
    )}
  </Fetchy>
);

Options

See interface IFetchyRequestOptions

Multi

Fetch on mount

import { FetchyMulti } from "react-fetchy";

const PostList = () => (
  <FetchyMulti
    requests={[
      { id: "1", url: "https://jsonplaceholder.typicode.com/todos/1" },
      { id: "2", url: "https://jsonplaceholder.typicode.com/todos/2" },
      { id: "3", url: "https://jsonplaceholder.typicode.com/todos/3" }
    ]}
  >
    {({ states }) => <pre>{JSON.stringify(states, null, 2)}</pre>}
  </FetchyMulti>
);

See CodeSandbox