React View Cache
cache react views.
Introduction
With react-view-cache, you can render your components within a special Cache component. When you render another
component within the same cache, the previous component will not unmount immediately, but just hide by being set as
display: none, with all state reserved.
It's great to cache pages in a SPA. By saving and restoring scroll in cache hooks, you will get an optimized app. When you browse back and forward, the previous page shows up immediately with the old scroll without any reloading. More, you will also make less effort to manage data and states between pages.
Basic Usage
import createCache from "react-view-cache";
const Cache = createCache();
...
const view = <Component ... />; // your component
const viewId = ...; // unique cache id for this component
...
<Cache viewId={viewId} view={view}/>
Options
You can pass in options as the args of createCache, or modify them on the created Cache instance.
const Cache = createCache(options)
// or
Cache.options.xxx = ...
- cacheTime - number, milliseconds, default 5 * 60 * 1000
- cacheLimit - number, default 5
- hooks
- beforeSwitch(oldViewId, newViewId)
- afterSwitch(oldViewId, newViewId)
- beforeAdd(viewId)
- afterAdd(viewId)
- beforeRemove(viewId)
- afterRemove(viewId)
Cache
Cache will render component by current props, and the previous components will be hidden.
props
- viewId - unique cache id for this component
- view - one of the following types
- react node
- func({isActive}): react node
- [cacheTime] - optional, cache time for this component
Examples
License
MIT