Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/diogofcunha/react-persist-route
A small module that persists url transitions to any storage, battle tested on ios PWAs to save last location in the app
https://github.com/diogofcunha/react-persist-route
component ios-pwa persist pwa reach-router react react-router redirect reloading route save stop url
Last synced: about 2 months ago
JSON representation
A small module that persists url transitions to any storage, battle tested on ios PWAs to save last location in the app
- Host: GitHub
- URL: https://github.com/diogofcunha/react-persist-route
- Owner: diogofcunha
- License: mit
- Created: 2019-02-22T22:03:53.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-11-22T21:18:21.000Z (about 1 year ago)
- Last Synced: 2024-04-23T12:17:34.173Z (9 months ago)
- Topics: component, ios-pwa, persist, pwa, reach-router, react, react-router, redirect, reloading, route, save, stop, url
- Language: TypeScript
- Homepage:
- Size: 1.23 MB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 💾 react-persist-route 📱
[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]
[](https://github.com/semantic-release/semantic-release)
[build-badge]: https://img.shields.io/travis/diogofcunha/react-persist-route/master.png?style=flat-square
[build]: https://travis-ci.org/diogofcunha/react-persist-route
[npm-badge]: https://img.shields.io/npm/v/react-persist-route.png?style=flat-square
[npm]: https://www.npmjs.com/package/react-persist-route
[coveralls-badge]: https://img.shields.io/coveralls/diogofcunha/react-persist-route/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/diogofcunha/react-persist-route
### 🚀 Save your url information, anywhere and anyhow.
This package enables to possibility of saving url transitions with minimum work, it is compatible with your favorite routers, **react-router** and **@reach/router**.
# The problem
In some specific situations you may need to persist route information for your web app, this is specially useful for **iOS PWAs** since they always redirect the user to the home page when launched (https://stackoverflow.com/questions/6930771/stop-reloading-of-web-app-launched-from-iphone-home-screen). Although this package won't solve issues related to multi factor auth on ios pwas, it will save your user a lot of pain while using the app on the day to day.
# Usage
```javascript
import ReactPersistRoute from "react-persist-route";
import {createLocalStorageAdapter} from "react-persist-route/lib/Adapters/localStorageAdapter"
const history = ... // History can be the history object from react-router of reach route
// The fallback url for your app, generally would be the home page.
const fallback = {
hash: "",
host: "mypwa.com",
hostname: "mypwa.com",
href: "https://mypwa.com/home",
origin: "",
pathname: "/home",
port: "",
protocol: "https:",
search: ""
};
const adapter = createLocalStorageAdapter('appkey', fallback)
```
# Main concepts
### Persistence Adapters
A persistence adapter is a an object of that implements the following interface
```typescript
export interface PersistenceAdapter {
getKey: () => string;
onSave: (key: string, location: SerializableLocation) => Promise;
onLoad: (key: string) => Promise;
onClear: (key: string) => Promise;
}
```
The main goal of persistence adapters is enable save to any data source (LocalStorage, indexedDB, server). This package the following adapters out of the box (this doesn't mean you need to use them):
- Local storage