Package Exports
- react-router-navigation-prompt
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-router-navigation-prompt) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
React Router
Table of Contents
Overview
Example Usage
API
Overview
Promps user to confirm navigation. A replacement component for the react-router <Prompt/>
. Allows for more flexible dialogs.
Note: Navigation away from your site, reload, or closing tab/window will also prompt navigation confirmation when <NavigationPrompt/>
'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
Example Usage
Simplest example:
<NavigationPrompt when={this.state.shouldConfirmNavigation}>
{({onConfirm, onCancel}) => (
<ConfirmNavigationModal when={true} onCancel={onCancel} onConfirm={onConfirm}/>
)}
</NavigationPrompt>
Complex example:
<NavigationPrompt
beforeConfirm={this.cleanup}
// Children will be rendered even if props.when is falsey and isActive is false:
renderIfNotActive={true}
// Confirm navigation if going to a path that does not start with current path:
when={(crntLocation, nextLocation) => !nextLocation.pathname.startsWith(crntLocation.pathname)}
>
{({isActive, onCancel, onConfirm}) => {
if (isActive) {
return (
<Modal show={true}>
<div>
<p>Do you really want to leave?</p>
<button onClick={onCancel}>Cancel</button>
<button onClick={onConfirm}>Ok</button>
</div>
</Modal>
);
}
return (
<div>This is probably an anti-pattern but ya know...</div>
);
}}
</NavigationPrompt>
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, // Added by react-router:
- match: Match,
- history: RouterHistory,
- location: Location,