# react-fetch-preloader

> Simple React component for display preloader while fetching

Latest version **0.0.3** (published 2018-12-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-fetch-preloader
pnpm add react-fetch-preloader
yarn add react-fetch-preloader
bun add react-fetch-preloader
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2018-12-16 |
| First published | 2018-12-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 67.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Maksim Markelov |
| Maintainers | mapkeji |
| Keywords | react, react-component, preloader, react-preloader, fetch, react-preloader-component |

## Links

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

## Dependencies (1)

- [react](https://npm.io/package/react.md) ^16.6.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.3 (latest) — 2018-12-16
- 0.0.2 — 2018-12-10
- 0.0.1 — 2018-12-10

## README

# react-fetch-preloader

Library for displaying preloader when response is longer than **duration**.

## Motivation


![react-preloader](https://media.giphy.com/media/ckTGwxd9JMUJG4PaGe/giphy.gif)

You can see gif right above to understand idea.

## Install

```shell
npm install --save react-fetch-preloader
yarn add react-fetch-preloader
```

## Components

### ShowPreloader

#### Properties

##### Required

###### url
Url of response - string

###### loaded
React component, when response is successful render this component

##### Not required

###### fetch
Function to fetch data. Default - window.fetch

###### duration
Number - if response is longer this value - show preloader(in ms). Default - 500

###### errored
React component, when response is failed render this component. Default -
```js
() => null
```

###### preloader
React component for display preloader. Default -
```js
() => <span>Loading...</span>
```

### withPreloader HOC component

**withPreloader** provides two extra functions:

#### preload
Takes two specified params: **id** and **url**

#### renderPreloader
Takes one specified param: **id**

You can check example of using HOC in example section

## More details and example

### Basic examples

API is unstable now, so I need to figure out what will be the best realization.

#### Multiple fetches fires **onClick**

You can use **ShowPreloader** component for this purpose

```js
import React from 'react';
import { ShowPreloader } from 'react-fetch-preloader';

const URL = 'https://randomuser.me/api/?results=';

const SORT = [1, 10];

class App extends React.Component {
  state = {
    item: 10,
  };

  setItem = item => () => {
    if (item !== this.state.item) {
      this.setState({ item });
    }
  };

  render() {
    const { item } = this.state;

    return (
      <div className="App">
        <div className="sort">
          {SORT.map(sort => (
            <button
              type="button"
              onClick={this.setItem(sort)}
              key={sort}
            >
              Load {sort} items
            </button>
          ))}
        </div>
        <ShowPreloader
          duration={300}
          preloader={YourPreloaderComponent}
          loaded={LoadedComponent}
          errored={ErrorComponent}
          url={`${URL}${item}`}
        />
      </div>
    );
  }
}
```

#### Fetches with **HOC**

You can use HOC component to fetch data in different places of your App

```js
import React from 'react';
import ReactDOM from 'react-dom';
import { withPreloader } from 'react-fetch-preloader';

import Preloader from './Preloader';
import Card from './Card';

import './styles.css';

const Error = data => {
  console.log(data);
  return <h1>Oops :( Error</h1>;
};

class App extends React.Component {
  preload = (id, url) => () => {
    this.props.preload(id, url);
  };

  render() {
    const { renderPreloader } = this.props;
    return (
      <div className="App">
        <div className="sort">
          <button
            type="button"
            onClick={this.preload(1, 'https://randomuser.me/api/?results=20')}
          >
            Load 20 items
          </button>
          <button
            type="button"
            onClick={this.preload(2, 'https://randomuser.me/api/?results=10')}
          >
            Load 10 items
          </button>
        </div>
        <div>Some content here</div>
        {renderPreloader(1, {
          duration: 0,
        })}
        <div>And here...</div>
        {renderPreloader(2)}
      </div>
    );
  }
}

const WrappedApp = withPreloader(App);

const rootElement = document.getElementById('root');
ReactDOM.render(
  <WrappedApp
    preloadOptions={{
      duration: 1000,
      preloader: Preloader,
      loaded: Card,
      errored: Error,
    }}
  />,
  rootElement,
);
```

You can clone this repository and check example

```shell
git clone https://github.com/mmarkelov/react-preloader.git
cd ./react-preloader/example
yarn && yarn run dev
```

## TODO

- [ ] Clearify tests
- [ ] Write clearer description
- [ ] Write more examples
- [x] SSR

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