# react-fetchy

> [![Build Status](https://travis-ci.org/LoicMahieu/react-fetchy.svg?branch=master)](https://travis-ci.org/LoicMahieu/react-fetchy) [![npm](https://img.shields.io/npm/v/react-fetchy.svg)](https://www.npmjs.com/package/react-fetchy)

Latest version **2.1.0** (published 2019-02-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-fetchy
pnpm add react-fetchy
yarn add react-fetchy
bun add react-fetchy
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2019-02-06 |
| First published | 2018-09-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 38.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Loïc Mahieu |
| Maintainers | loicmahieu |

## Links

- npm: https://www.npmjs.com/package/react-fetchy
- Repository: https://github.com/loicmahieu/react-fetchy
- Homepage: https://github.com/loicmahieu/react-fetchy#readme
- Issues: https://github.com/loicmahieu/react-fetchy/issues
- npm.io page: https://npm.io/package/react-fetchy

## Dependencies (2)

- [lodash](https://npm.io/package/lodash.md) ^4.17.11
- [superagent](https://npm.io/package/superagent.md) ^3.8.3

## Recent versions

- 2.1.0 (latest) — 2019-02-06
- 2.0.0 — 2019-01-25
- 1.1.0 — 2018-09-24
- 1.0.3 — 2018-09-14
- 1.0.2 — 2018-09-14
- 1.0.1 — 2018-09-14
- 1.0.0 — 2018-09-13

## README

# react-fetchy

[![Build Status](https://travis-ci.org/LoicMahieu/react-fetchy.svg?branch=master)](https://travis-ci.org/LoicMahieu/react-fetchy)
[![npm](https://img.shields.io/npm/v/react-fetchy.svg)](https://www.npmjs.com/package/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`](http://visionmedia.github.io/superagent/).

### Example

#### Single

##### Fetch on mount

```js
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](https://codesandbox.io/s/pjrrk8nqrx)

##### Manual fetch

```js
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`](./src/Fetchy.tsx#L19-L30)

#### Multi

##### Fetch on mount

```js
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](https://codesandbox.io/s/n500mq8k1j)

##### Options

See [`interface IFetchyMultiOptions`](./src/FetchyMulti.tsx#L25-L28)

## License

MIT

---
_Source: https://npm.io/package/react-fetchy · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._