-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: Update readme and changelog script (#9)
* Update readme * Update scripts * Bump version
- Loading branch information
Showing
7 changed files
with
56 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,58 +1,68 @@ | ||
# Hibernating Components for React Router | ||
# Hibernating Components for React & React Router | ||
|
||
**These packages are in active development. Things will change rapidly, and it is not yet production-ready. Feedback is welcome.** | ||
Bring back previously-unmounted components and subtrees -- state and all -- when they remount. | ||
|
||
Detach a subtree when it unmounts, and bring it back -- state and all -- when it remounts. | ||
**These packages are in active development. Things will change rapidly, and it is not yet production-ready. Feedback is welcome.** | ||
|
||
[![build status](https://img.shields.io/travis/com/spautz/react-hibernate/master.svg)](https://travis-ci.com/spautz/react-hibernate/branches) | ||
[![test coverage](https://img.shields.io/coveralls/github/spautz/react-hibernate/master.svg)](https://coveralls.io/github/spautz/react-hibernate?branch=master) | ||
[![gzip size](https://img.shields.io/bundlephobia/minzip/react-router-hibernate)](https://bundlephobia.com/result?p=react-router-hibernate@latest) | ||
|
||
## Overview | ||
|
||
By defaut, navigating from one `<Route>` to another in react-router will unmount the old route's tree. | ||
If you return to it, it will be recreated from scratch. | ||
When a React component stops being rendered, it's gone: local state, dom state, etc are removed. If you want to keep | ||
that prior state around you must store it elsewhere. | ||
|
||
This library adds `<HibernatingSwitch>` and `<HibernatingRoute>`: drop-in replacements for `<Switch>` and `<Route>` | ||
which do not immediately unmount components when you navigate away. If you return, the prior tree will be restored, | ||
local state and all. | ||
This repo provides libraries which can keep the old subtree around for a while, when desired. | ||
|
||
## Packages | ||
Instead of unmounting, the subtree goes into "hibernation". It will "wake up" when you return, including all internal | ||
state, as if you never left. | ||
|
||
**[react-hibernate](./packages/react-hibernate-core/)** [![npm version](https://img.shields.io/npm/v/react-hibernate.svg)](https://www.npmjs.com/package/react-hibernate) | ||
- [React Router Hibernate](./packages/react-router-hibernate/) works per-route, if you're using | ||
[React Router](https://reacttraining.com/react-router/) (v5) | ||
- [React Hibernate](./packages/react-hibernate-core/) works for any React subtree | ||
- [React Pauseable Containers](./packages/react-pauseable-containers/) improve performances by freezing all updates | ||
to hibernated subtrees | ||
|
||
Restore previously-unmounted subtrees -- state and all -- on remount. | ||
[Cache options are available](https://github.com/spautz/limited-cache/#options) to control how many subtrees may be | ||
hibernated at a time, and for how long. | ||
|
||
**[react-router-hibernate](./packages/react-router-hibernate/)** [![npm version](https://img.shields.io/npm/v/react-router-hibernate.svg)](https://www.npmjs.com/package/react-router-hibernate) | ||
## Some Use Cases | ||
|
||
A react-router Switch which can leave inactive routes mounted-but-inactive until you navigate back. | ||
- Screens which are slow to initialize: avoid initializing a second time | ||
- Form values: restore half-completed form fields if the user leaves and come back later | ||
- Background tasks like file uploads: dispatch actions from unmounted components | ||
- Accordion panels, steps in a wizard, or other temporarily-hidden content | ||
|
||
**[react-pauseable-containers](./packages/react-pauseable-containers/)** [![npm version](https://img.shields.io/npm/v/react-pauseable-containers.svg)](https://www.npmjs.com/package/react-pauseable-containers) | ||
In general, this is a "good enough" alternative to storing component state in Redux or an external cache: you _could_ | ||
build a powerful system to track partially-completed forms, it would just take time and engineering. React Hibernate is | ||
just a quick, easy way to get "good enough" coverage for the common cases. | ||
|
||
Prevent subtrees from rerendering when their parent changes, or when certain context values change. | ||
## Packages | ||
|
||
**[redux-pauseable-store](./packages/redux-pauseable-store/)** [![npm version](https://img.shields.io/npm/v/redux-pauseable-store.svg)](https://www.npmjs.com/package/redux-pauseable-store) | ||
**[react-hibernate](./packages/react-hibernate-core/)** | ||
|
||
Derive one redux store from another, then pause it. | ||
[![npm version](https://img.shields.io/npm/v/react-hibernate.svg)](https://www.npmjs.com/package/react-hibernate) | ||
[![gzip size](https://img.shields.io/bundlephobia/minzip/react-hibernate)](https://bundlephobia.com/result?p=react-hibernate@latest) | ||
|
||
## Example | ||
Restore previously-unmounted subtrees -- state and all -- on remount. | ||
|
||
**[react-router-hibernate](./packages/react-router-hibernate/)** | ||
|
||
[![npm version](https://img.shields.io/npm/v/react-router-hibernate.svg)](https://www.npmjs.com/package/react-router-hibernate) | ||
[![gzip size](https://img.shields.io/bundlephobia/minzip/react-router-hibernate)](https://bundlephobia.com/result?p=react-router-hibernate@latest) | ||
|
||
A react-router Switch which can leave inactive routes mounted-but-inactive until you navigate back. | ||
|
||
```javascript | ||
import { HibernatingSwitch, HibernatingRoute } from 'react-router-hibernate'; | ||
**[react-pauseable-containers](./packages/react-pauseable-containers/)** | ||
|
||
// then render: | ||
<HibernatingSwitch maxCacheTime={60000}> | ||
[![npm version](https://img.shields.io/npm/v/react-pauseable-containers.svg)](https://www.npmjs.com/package/react-pauseable-containers) | ||
[![gzip size](https://img.shields.io/bundlephobia/minzip/react-pauseable-containers)](https://bundlephobia.com/result?p=react-pauseable-containers@latest) | ||
|
||
{/* Use the "Hibernating" variants exactly like the standard ones */} | ||
<HibernatingRoute path="/foo" component={...} /> | ||
<HibernatingRoute path="/bar" render={...} /> | ||
Prevent subtrees from rerendering when their parent changes, or when values from context change. | ||
|
||
{/* You can mix and match: use them alongside the normal react-router components */} | ||
<Route path="/baz" component={...} /> | ||
<Redirect from="/something-else" to="/foo" /> | ||
**[redux-pauseable-store](./packages/redux-pauseable-store/)** | ||
|
||
{/* If you have your own custom components, you can add an isHibernatingRoute prop */} | ||
<MyPrivateRoute path="/secret" component={...} isHibernatingRoute /> | ||
[![npm version](https://img.shields.io/npm/v/redux-pauseable-store.svg)](https://www.npmjs.com/package/redux-pauseable-store) | ||
[![gzip size](https://img.shields.io/bundlephobia/minzip/redux-pauseable-store)](https://bundlephobia.com/result?p=redux-pauseable-store@latest) | ||
|
||
</HibernatingSwitch> | ||
``` | ||
Derive one redux store from another, then pause its state and/or actions. This is used by react-pauseable-containers. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters