https://github.com/xjkit/react-goodbye
A save reminder component for react router
https://github.com/xjkit/react-goodbye
goodbye higher-order-component react react-goodbye react-router-v4 reminder reminder-component render-props router-provider save-reminder
Last synced: 3 months ago
JSON representation
A save reminder component for react router
- Host: GitHub
- URL: https://github.com/xjkit/react-goodbye
- Owner: xJkit
- License: mit
- Created: 2018-04-15T16:40:00.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-28T10:23:23.000Z (over 2 years ago)
- Last Synced: 2025-03-18T13:07:59.885Z (3 months ago)
- Topics: goodbye, higher-order-component, react, react-goodbye, react-router-v4, reminder, reminder-component, render-props, router-provider, save-reminder
- Language: JavaScript
- Homepage: https://xJkit.github.io/react-goodbye
- Size: 1.09 MB
- Stars: 120
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React GoodBye
> A save reminder component for react router v4.
react-goodbye is a save reminder utility to prevent routing transition before you leave without saving changes.
**Please check the [demo](https://xJkit.github.io/react-goodbye) page for more information.**
## Install
[](https://nodei.co/npm/react-goodbye/)
```bash
npm install --save react-goodbye
```
or you can use **yarn**:
```bash
yarn add react-goodbye
```
> note: react-goodbye uses React 16.3 new context api under the hood. Therefore, only React v16.3+ are supported.
## Usage
* Decorate your router provider from react-router using `withGoodBye`:
```jsx
import { BrowserRouter } from 'react-router-dom';
import { withGoodBye } from 'react-goodbye';
const EnhancedRouter = withGoodBye(BrowserRouter);
ReactDOM.render(
,
document.getElementById('root')
);
```
* Import `GoodBye` component under the page you want with save reminder:
```jsx
import React from 'react';
import GoodBye from 'react-goodbye';
import Modal from './path/to/your/modal/component';
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {
initialValue: props.initialValue,
currentValue: props.initialValue
};
}
render() {
return (
{({ isShow, handleOk, handleCancel }) =>
isShow && (
Settings Changed
You change the page without saving any data. Do you want to
leave?
Yes
No
)
}
this.setState({ currentValue: evt.target.value })}
/>
);
}
}
```
## API Reference
* [withGoodBye](#withgoodbye)
* [Provider](#provider)
* [GoodBye](#goodbye)
### withGoodBye
`withGoodBye` uses **higher order component** pattern to inject the **getUserConfirmation** handle function prop on the react-router provider. Use this HoC to decorate the router providers like `BrowserRouter`, `HashRouter` or low-level `Router`:
```jsx
import { withGoodBye } from 'react-goodbye';
import { Router } from 'react-router';
const EnhancedRouter = withGoodBye(Router);
ReactDom.render(
);
```
### Provider
If you prefer **render props** pattern, you can use this `Provider` component like so:
```jsx
import { Provider as GoodByeProvider } from 'react-goodbye';
import { BrowserRouter } from 'react-router-dom';
ReactDom.render(
{({ handleGetUserConfirm }) => (
)}
);
```
### GoodBye
`GoodBye` is the consumer component of the GoodBye context. This component must be in the subtree of `Provider` or decorated router provider.
| props | type | default | description |
|-------------------|---------|---------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| when | Boolean | false | Make render props `isShow` to be true or false when routing transition occurs. |
| alertBeforeUnload | Boolean | false | Turn on the browser alert. Technically, when you **refresh** or **close** browser window, only browser itself can detect and popup alert for you. If you want to remind the user when doing actions above, turn on this option. |
| alertMessage | String | '' | Custom browser alert messages. Note that this option only works for **IE**. |
| conditionalPrompt | func | | Custom callback to show the prompt conditionally based on the location. The function receives the location and you can return true to allow the transition or false to show the prompt. |
**react-goodbye** will handle all of the code logic for you. Use provided `render props` to show whatever you want (modal, lightbox, dialog, popup, etc)
| render props | type | default | description |
|--------------|----------|---------|---------------------------------------------------------------------------------------------------------------------------------|
| isShow | Boolean | false | While `when` prop is true, `isShow` will be true when routing transition occurs. You can put your dialog component here. |
| handleOk | function | | Allow routing transition and make `isShow` to be **false** again. |
| handleCancel | function | | Block routing transition and make `isShow` to be **false** again. |
| handlePass | function | | Low-level api under `handleOk` and `handleCancel`; pass **true** or **false** will allow/block routing transitions. Use this function to do your additional actions. |
## License
MIT © [xJkit](https://github.com/xJkit)