# react-easy-preload

> Custom react router switch !!! renamed to react-router-loading !!!

Latest version **1.1.1** (published 2021-04-30) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-easy-preload
pnpm add react-easy-preload
yarn add react-easy-preload
bun add react-easy-preload
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2021-04-30 |
| First published | 2020-01-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 42.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 62 |
| Author | Victor Trusov |
| Maintainers | victortrusov |
| Keywords | react, switch, router, react-router-dom, preload, prerender, prefetch, loading, bar |

## Links

- npm: https://www.npmjs.com/package/react-easy-preload
- Repository: https://github.com/victortrusov/react-router-loading
- Homepage: https://github.com/victortrusov/react-router-loading#readme
- Issues: https://github.com/victortrusov/react-router-loading/issues
- npm.io page: https://npm.io/package/react-easy-preload

## Dependencies (1)

- [topbar](https://npm.io/package/topbar.md) ^1.0.1

## 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

- 1.1.1 (latest) — 2021-04-30
- 1.1.0 — 2021-04-22
- 1.0.2 — 2020-05-01
- 1.0.1 — 2020-01-06
- 1.0.0 — 2020-01-06

## README

# react-easy-preload

<span style="color:red">Attention</span>
## Project renamed to [react-router-loading](https://www.npmjs.com/package/react-router-loading)
<span style="color:red">You can find new releases there</span>  
\
Custom react router switch with [topbar](https://github.com/buunguyen/topbar) for easy data preloading

![](example.gif)

[DEMO](https://codesandbox.io/s/react-easy-preload-demo-sguvm)

## Requirements
```js
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0",
"react-router-dom": "^5.0.0"
```

## Installation

```console
npm install react-easy-preload
## or
yarn add react-easy-preload
```

## Usage

In your router section change react-router-dom's `Switch` to `PreloadingSwitch`
```js
import { PreloadingSwitch, Route } from "react-easy-preload";

<PreloadingSwitch>
    <Route />
    <Route />
    ...
</PreloadingSwitch>
```

Add `preload` prop to every route that must be loaded before switching
```js
<PreloadingSwitch>
    //data will be loaded before switching
    <Route preload />

    //instant switch as before
    <Route />
    ...
</PreloadingSwitch>
```

Add `loadingContext.done()` at the end of your initial loading method in pages that uses in routes you marked with `preload` prop
```js
import { LoadingContext } from "react-easy-preload";
const loadingContext = useContext(LoadingContext);

const loading = async () => {
    //loading some data

    //call method to indicate that loading is done and we are ready to switch
    loadingContext.done();
};
```
or for class components
```js
import { LoadingContext } from "react-easy-preload";

class ClassComponent extends React.Component {
    ...
    loading = async () => {
        //loading some data

        //call method from props to indicate that loading is done
        this.props.loadingContext.done();
    };
    ...
};

//we should wrap class component with Context Provider to get access to loading methods
const ClassComponentWrapper = (props) =>
    <LoadingContext.Consumer>
        {loadingContext => <ClassComponent loadingContext={loadingContext} {...props} />}
    </LoadingContext.Consumer>

```

## Typescript

If you are using typescript to add `preload` prop to routes just import `Route` from this package instead of `react-router-dom`
```js
import { PreloadingSwitch, Route } from "react-easy-preload";

<PreloadingSwitch>
    //data will be loaded before switching
    <Route preload />

    //instant switch as before
    <Route />
    ...
</PreloadingSwitch>
```

## Config

You can specify loading screen that would be shown at first loading of your app
```js
const MyLoadingScreen = () => <div>Loading...</div>

<PreloadingSwitch loadingScreen={MyLoadingScreen}>
...
</PreloadingSwitch>
```

Call `topbar.config()` if you want to change topbar configuration. More info http://buunguyen.github.io/topbar/.
```js
import { topbar } from "react-easy-preload";

topbar.config({
    barColors: {
        '0': 'rgba(26,  188, 156, .7)',
        '.3': 'rgba(41,  128, 185, .7)',
        '1.0': 'rgba(231, 76,  60,  .7)'
    },
    shadowBlur: 0
});
```
## Example

Clone repository and run
```
yarn build && yarn example
```

## License

[MIT](./LICENSE)

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