react-router-modal - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

docs/react-router-modal.md

@@ -28,2 +28,38 @@ <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 
+**Examples**
+
+_Using default class names_
+
+```javascript
+<ModalContainer />
+```
+
+_Overriding the default class names_
+
+```javascript
+<ModalContainer
+  bodyModalOpenClassName='modal-open'
+  containerClassName='modal-container'
+  backdropClassName='modal-backdrop'
+  modalClassName='modal'
+/>
+
+
+Note that modals are made "modal" via CSS styles, and end up rendered like the following in the DOM (with two modals, for example):
+<div className={containerClassName'>
+  <div>
+    <div className={backdropClassName} />
+    <div className={modalClassName}>
+      .. bottom-most modal contents ..
+    </div>
+  </div>
+  <div>
+    <div className={backdropClassName} />
+    <div className={modalClassName}>
+      .. top-most modal contents ..
+    </div>
+  </div>
+</div>
+```
+
 ## ModalLink
@@ -46,2 +82,12 @@
 
+**Examples**
+
+_Example ModalLink_
+
+```javascript
+<ModalLink path='/hello' component={HelloComponent}>
+  Say Hello
+</ModalLink>
+```
+
 Returns **any** 
@@ -62,3 +108,4 @@
     -   `props.exact` **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** If set, only show modal if route exactly matches path.
-    -   `props.props` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Props to be passed to the react component specified by the component property.
+    -   `props.props` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Props to be passed to the react component specified by the component property.When the route matches, the modal is shown.
+        If multiple routes match, the modals will be stacked based on the length of the path that is matched.
     -   `props.match`  
@@ -110,1 +157,19 @@ -   `props.history`
 ```
+
+_Specifying stack order_
+
+```javascript
+<div>
+  <Modal
+    className='top-component-modal'
+    component={MyTopComponent}
+    props={ { foo: 'bar'} }
+    stackOrder={2}
+  />
+  <Modal
+    component={MyBottomComponent}
+    props={ { bar: 'baz'} }
+    stackOrder={1}
+  />
+</div>
+```

package.json

 {
   "name": "react-router-modal",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "simple react router modal",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16345

increased by8.85%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes