# react-reusable

> react-reusable React component

Latest version **6.0.0** (published 2017-12-24) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 6.0.0 |
| Published | 2017-12-24 |
| First published | 2017-06-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | viankakrisna |
| Keywords | react-component |

## Links

- npm: https://www.npmjs.com/package/react-reusable
- npm.io page: https://npm.io/package/react-reusable

## Dependencies (3)

- [md5](https://npm.io/package/md5.md) ^2.2.1
- [lodash](https://npm.io/package/lodash.md) ^4.17.4
- [history](https://npm.io/package/history.md) ^4.7.2

## Recent versions

- 6.0.0 (latest) — 2017-12-24
- 5.0.0 — 2017-11-08
- 4.1.0 — 2017-11-02
- 4.0.0 — 2017-11-02
- 3.1.0 — 2017-10-29
- 3.0.0 — 2017-10-29
- 2.1.0 — 2017-10-26
- 2.0.2 — 2017-10-07
- 2.0.1 — 2017-08-13
- 2.0.0 — 2017-08-13
- 1.2.1 — 2017-06-19
- 1.2.0 — 2017-06-19
- 1.1.0 — 2017-06-18
- 1.0.9 — 2017-06-18
- 1.0.8 — 2017-06-18
- … 8 more at https://npm.io/package/react-reusable/versions

## README

# react-reusable

```npm install --save react-reusable```

or

```yarn add react-reusable```
## What?
This is a set of React components that handles data fetching (<Fetch />), posting (<Form />), and navigation (<Link />). The bread and butter of every web apps.

## Why?
I use this pattern a lot, and I want to reduce boilerplate of writing the implementation of data fetching and posting in React apps.

## Fetch Example:
```js

import React from 'react'
import Fetch from 'react-reusable/lib/Fetch'

function Hello () {
  return (
    <div>
      <h1>Hello from React</h1>
      <Fetch url={'https://api.github.com/user/repos'}>
        {data => <p>{data.message}</p>}
      </Fetch>
    </div>
  )
}

export default Hello
```

## Form Example:
```js
import React from 'react'
import Form from 'react-reusable/lib/Form';

const handleSubmit = formData =>
  new Promise(resolve => setTimeout(() => resolve(formData), 1500));

const showFile = (key, value) =>
  value instanceof File
    ? {
        lastModified: value.lastModified,
        lastModifiedDate: value.lastModifiedDate,
        name: value.name,
        size: value.size,
        type: value.type,
      }
    : value;

const renderFieldset = (state, bind) =>
  <fieldset style={{ opacity: state.loading ? 0.5 : 1 }}>
    <input {...bind('name')} type="text" />
    <input {...bind(['email', 0])} type="text" />
    <input
      onChange={e =>
        bind(['profile', 'avatar']).onChange({
          target: {
            name: e.target.name,
            value: e.target.files[0],
          },
        })}
      type="file"
    />
    <button>Submit</button>
    <pre>
      {JSON.stringify(state, showFile, 2)}
    </pre>
  </fieldset>;

const ReusableForm = props =>
  <div>
    <h1>Reusable Form Demo</h1>
    <Form
      onSubmit={handleSubmit}
      formData={{
        email: ['test@test.com'],
      }}
      children={renderFieldset}
    />
  </div>;
  ```

## Fetch - Advanced usage
You can find it in the demo folder
```js
import React from 'react';
import { render } from 'react-dom';

import Fetch from 'react-reusable/lib/Fetch';

const Box = props => (
  <div style={{ float: 'left', width: `${100 / 4}%` }}>
    {props.children}
  </div>
);

const AsyncList = props => (
  <Fetch
    onLoading={() => <p>Loading...</p>}
    onSuccess={data => (
      <ul>
        {data.map(post => (
          <li key={post.id}>
            {post.title}
          </li>
        ))}
      </ul>
    )}
    onError={(error, reload) => (
      <div>
        <p>
          Error!
        </p>
        <pre>
          {error.message}
        </pre>
        <button onClick={e => reload(props)}>Reload?</button>
      </div>
    )}
    {...props}
  />
);

let Demo = props => (
  <div>
    <Box>
      <h1>onSuccess</h1>
      <AsyncList url={'https://jsonplaceholder.typicode.com/posts'} />
    </Box>
    <Box>
      <h1>onError</h1>
      <AsyncList
        url={'https://jsonplaceholder.typicode.com/poss'}
        onError={(error, reload) => (
          <div>
            <p>
              Error!
            </p>
            <pre>
              {error.message}
            </pre>
            <button
              onClick={e =>
                reload({
                  ...props,
                  url: 'https://jsonplaceholder.typicode.com/posts',
                })}
            >
              Reload?
            </button>
          </div>
        )}
      />
    </Box>
    <Box>
      <h1>onLoading</h1>
      <AsyncList />
    </Box>
    <Box>
      <h1>With Children</h1>
      <AsyncList url={'https://jsonplaceholder.typicode.com/posts'}>
        {data => <pre>{JSON.stringify(data, null, 2)}</pre>}
      </AsyncList>
    </Box>
  </div>
);

render(<Demo />, document.querySelector('#demo'));
```

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