react-router-navigation-prompt - npm Package Compare versions

Comparing version 1.6.4 to 1.6.5

package.json

 {
   "name": "react-router-navigation-prompt",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "description": "A replacement component for the react-router `<Prompt/>`. Allows for more flexible dialogs.",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -17,5 +17,5 @@ # React Router <NavigationPrompt/>
 
-Promps user to confirm navigation. A replacement component for the react-router `<Prompt/>`. Allows for more flexible dialogs.
+Promps user to confirm navigation. A replacement component for the react-router `<Prompt/>` (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 `<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.
+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.
 
@@ -26,2 +26,10 @@ Motivation: https://github.com/ReactTraining/react-router/issues/4635
 
+## Demo
+
+A visual example of `<Prompt />` 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
@@ -32,11 +40,15 @@
 ```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";
 
 <NavigationPrompt when={this.state.shouldConfirmNavigation}>
-  {({onConfirm, onCancel}) => (
-    <ConfirmNavigationModal when={true} onCancel={onCancel} onConfirm={onConfirm}/>
+  {({ onConfirm, onCancel }) => (
+    <ConfirmNavigationModal
+      when={true}
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+    />
   )}
-</NavigationPrompt>
+</NavigationPrompt>;
 ```
@@ -47,5 +59,5 @@
 ```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";
 
@@ -57,5 +69,7 @@ <NavigationPrompt
   // Confirm navigation if going to a path that does not start with current path:
-  when={(crntLocation, nextLocation) => !nextLocation || !nextLocation.pathname.startsWith(crntLocation.pathname)}
+  when={(crntLocation, nextLocation) =>
+    !nextLocation || !nextLocation.pathname.startsWith(crntLocation.pathname)
+  }
 >
-  {({isActive, onCancel, onConfirm}) => {
+  {({ isActive, onCancel, onConfirm }) => {
     if (isActive) {
@@ -72,7 +86,5 @@ return (
     }
-    return (
-      <div>This is probably an anti-pattern but ya know...</div>
-    );
+    return <div>This is probably an anti-pattern but ya know...</div>;
   }}
-</NavigationPrompt>
+</NavigationPrompt>;
 ```
@@ -82,16 +94,14 @@
 
-* `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,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

446930

increased by0.59%

Number of package files

39

increased by2.63%

Number of lines in readme file

101

increased by10.99%

No dependency changes