diff --git a/README.md b/README.md index dd496af..f8f6e90 100644 --- a/README.md +++ b/README.md @@ -16,43 +16,57 @@ Promps user to confirm navigation. A replacement component for the react-router `` (this still uses react-router to work). Allows for more flexible dialogs. -Note: Navigation away from your site, reload, or closing tab/window will also prompt navigation confirmation when ``'s `props.when` is truthy. Usually, browsers handle this navigation UX themselves, leading to vanilla alert boxes. Also, many browsers require users to interact with your site before confirming navigation away. +Note: Navigation away from your site, reload, or closing tab/window will also prompt navigation confirmation when ``'s `props.when` is truthy. Usually, browsers handle this navigation UX themselves, leading to vanilla alert boxes. Also, many browsers require users to interact with your site before confirming navigation away. Motivation: https://github.com/ReactTraining/react-router/issues/4635 Adapted from: https://gist.github.com/bummzack/a586533607ece482475e0c211790dd50 +## Demo + +A visual example of `` vs the package in action: + +![demo-gif](https://media.giphy.com/media/2t9sbep1TtRTHF2YJD/giphy.gif) + +![demo-gif](https://media.giphy.com/media/oVkikQIhaZIzcEBK70/giphy.gif) + ## Example Usage #### Simplest example: ```javascript -import NavigationPrompt from 'react-router-navigation-prompt'; +import NavigationPrompt from "react-router-navigation-prompt"; -import ConfirmNavigationModal from './your-own-code'; +import ConfirmNavigationModal from "./your-own-code"; - {({onConfirm, onCancel}) => ( - + {({ onConfirm, onCancel }) => ( + )} - +; ``` #### Complex example: ```javascript -import NavigationPrompt from 'react-router-navigation-prompt'; +import NavigationPrompt from "react-router-navigation-prompt"; -import Modal from './your-own-code'; +import Modal from "./your-own-code"; !nextLocation || !nextLocation.pathname.startsWith(crntLocation.pathname)} + when={(crntLocation, nextLocation) => + !nextLocation || !nextLocation.pathname.startsWith(crntLocation.pathname) + } > - {({isActive, onCancel, onConfirm}) => { + {({ isActive, onCancel, onConfirm }) => { if (isActive) { return ( @@ -64,27 +78,23 @@ import Modal from './your-own-code'; ); } - return ( -
This is probably an anti-pattern but ya know...
- ); + return
This is probably an anti-pattern but ya know...
; }} -
+
; ``` ## API -* `props` - * afterCancel?: Function, - * afterConfirm?: Function, - * beforeCancel?: Function, - * beforeConfirm?: Function, - * children: (data: {isActive: bool, onCancel: Function, onConfirm: Function}) => React$Element<*>, - * renderIfNotActive: bool, - * when: bool | (Location, ?Location) => bool, - * disableNative: bool, - // Added by react-router: - * match: Match, - * history: RouterHistory, - * location: Location, - - +- `props` + - afterCancel?: Function, + - afterConfirm?: Function, + - beforeCancel?: Function, + - beforeConfirm?: Function, + - children: (data: {isActive: bool, onCancel: Function, onConfirm: Function}) => React$Element<\*>, + - renderIfNotActive: bool, + - when: bool | (Location, ?Location) => bool, + - disableNative: bool, + // Added by react-router: + - match: Match, + - history: RouterHistory, + - location: Location, diff --git a/package.json b/package.json index 4784093..c92feeb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-router-navigation-prompt", - "version": "1.6.4", + "version": "1.6.5", "description": "A replacement component for the react-router ``. Allows for more flexible dialogs.", "scripts": { "build": "webpack",