react-router-modal - npm Package Compare versions

Comparing version 1.1.7 to 1.1.8

lib/index.js

@@ -25,32 +25,3 @@ 'use strict';
 
-/**
-* @example <caption>TL;DR</caption>
-*import { ModalContainer, ModalRoute } from 'react-router-modal';
-*import { BrowserRouter, Link } from 'react-router-dom';
-*
-*function FooModal() {
-*  return <div>FOO</div>;
-*}
-*
-*function BarModal() {
-*  return <div>BAR</div>;
-*}
-*
-*function Example() {
-* return (
-*   <BrowserRouter>
-*     <div>
-*       <Link to='/foo'>show foo</Link>
-*       <Link to='/bar'>show bar</Link>
-*
-*       <ModalRoute component={FooModal} path='/foo' className='test-modal test-modal-foo'/>
-*       <ModalRoute component={BarModal} path='/bar' className='test-modal test-modal-bar'/>
-*
-*       <ModalContainer />
-*     </div>
-*   </BrowserRouter>
-* );
-*}
-*/
 exports.default = { Modal: _modal2.default, ModalContainer: _modal_container2.default, ModalLink: _modal_link2.default, ModalRoute: _modal_route2.default };
 module.exports = exports['default'];

package.json

 {
   "name": "react-router-modal",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "simple react router modal",
@@ -19,3 +19,3 @@ "main": "lib/index.js",
     "build:flow": "flow-copy-source -v  src lib",
-    "build:docs": "mkdir -p docs/ && documentation build src/ -f md -o docs/react-router-modal.md",
+    "build:docs": "documentation build --config docs/documentation.yml -f md -o README.md",
     "prepublishOnly": "npm run build"
@@ -22,0 +22,0 @@ },

README.md

@@ -0,1 +1,12 @@
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
+
+### Table of Contents
+
+-   [react-router-modal](#react-router-modal)
+-   [Examples](#examples)
+-   [ModalContainer](#modalcontainer)
+-   [ModalRoute](#modalroute)
+-   [Modal](#modal)
+-   [ModalLink](#modallink)
+
 ## react-router-modal
@@ -5,5 +16,5 @@
 
-Component docs: https://github.com/davidmfoley/react-router-modal/blob/master/docs/react-router-modal.md
+Component docs: <https://github.com/davidmfoley/react-router-modal/blob/master/docs/react-router-modal.md>
 
-Examples: https://davidmfoley.github.io/react-router-modal-examples
+Examples: <https://davidmfoley.github.io/react-router-modal-examples>
 
@@ -16,12 +27,236 @@ ### Installation
 
+or
+
 `yarn add react-router-modal`
 
 You will also need to install some other modules as peers.
-TBH, if you are looking at this package you probably already have these, but you might want to check for version compaibility.
 
-`react-router-dom` *version 4*
+TBH, if you are looking at this package you probably already have these, but you might want to check for version compatibility.
 
-`react` & `react-dom`, version 15
+`react-router-dom` _version 4_
 
+`react` & `react-dom`, version 15 or higher
+
 For ex: `yarn add react-router-dom react react-dom`.
 
+### Getting started
+
+To add react-router-modal to your app:
+
+1.  Include the CSS for react-router-modal, found in this package at `css/react-router-modal.css`
+
+If you are using webpack, you can do this:
+
+`import 'react-router-modal/css/react-router-modal.css';`
+
+Note that you can also copy this file or create your own css and specify your own class names.
+
+2.  Add a `<ModalContainer />` to your react application. This is where any shown modals are added to the DOM.
+
+See also: <https://github.com/davidmfoley/react-router-modal-examples/blob/master/src/App.js#L42>
+
+3.  Add a `<ModalRoute />` to test your setup:
+
+```javascript
+<ModalRoute path='/modal-test' parentPath='/'>
+  Hello
+</ModalRoute>
+```
+
+4.  Navigate to /modal-test in your app. You should see a Modal with the contents "Hello".
+
+
+## Examples
+
+### TL;DR Example
+
+```javascript
+import { ModalContainer, ModalRoute } from 'react-router-modal';
+import { BrowserRouter, Link } from 'react-router-dom';
+
+// assumes webpack loader for css
+// ... or include this css however you do that in your project ...
+import 'react-router-modal/css/react-router-modal.css'
+
+function FooModal() {
+  return <div>FOO</div>;
+}
+
+function BarModal() {
+  return <div>BAR</div>;
+}
+
+function Example() {
+ return (
+   <BrowserRouter>
+     <div>
+       <Link to='/foo'>show foo</Link>
+       <Link to='/bar'>show bar</Link>
+
+       <ModalRoute component={FooModal} path='/foo' className='test-modal test-modal-foo'/>
+       <ModalRoute component={BarModal} path='/bar' className='test-modal test-modal-bar'/>
+
+       <ModalContainer />
+     </div>
+   </BrowserRouter>
+ );
+}
+```
+
+
+## ModalContainer
+
+Container for rendered modals.
+
+This should be included in your react app as one of the last elements before the closing body tag.
+When modals are rendered, they live inside this container.
+When no modals are shown, nothing is rendered into the DOM.
+
+**Parameters**
+
+-   `props` **Props** 
+    -   `props.modalClassName` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** class name to apply to modals (optional, default `react-router-modal__modal`)
+    -   `props.backdropClassName` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** class name to apply to modal backdrops (optional, default `react-router-modal__backdrop`)
+    -   `props.containerClassName` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** class name to apply to the container itself (optional, default `react-router-modal__container`)
+    -   `props.bodyModalClassName` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** class name to apply to the <body /> when any modals are shown (optional, default `react-router-modal__modal-open`)
+
+**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'
+/>
+```
+
+_DOM structure_
+
+```javascript
+// 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>
+```
+
+## ModalRoute
+
+A react-router Route that shows a modal when the location pathname matches.
+
+**Parameters**
+
+-   `_ref`  
+-   `props` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** 
+    -   `props.path` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** path to match
+    -   `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.parentPath` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** path to navigate to when backdrop is clicked
+    -   `props.className` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** class name to apply to modal container
+    -   `props.children` **Children** modal content can be specified as chld elements
+    -   `props.component` **ReactElement** modal content can be specified as a component type
+    -   `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.
+
+## Modal
+
+Renders its contents in a modal div with a backdrop.
+Use Modal if you want to show a modal without changing the route.
+
+The content that is shown is specified by _either_ the "component" prop, or by
+child elements of the Modal.
+
+**Parameters**
+
+-   `props` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** 
+    -   `props.stackOrder` **[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** order to stack modals, higher number means "on top"
+    -   `props.className` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** class name to apply to modal container
+    -   `props.children` **Children** Modal content can be specified as chld elements
+    -   `props.component` **Component** React component to render in the modal.
+    -   `props.props` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** props to pass to the react component specified by the component property
+
+**Examples**
+
+_Modals using a component and props, vs. child elements_
+
+```javascript
+const Hello = ({ who }) => (<div>Hello {who}!</div>);
+
+// component and props
+const ComponentExample = () => (
+  <Modal
+   component={Hello}
+   props={{ who: 'World' }}
+  />
+);
+
+// using child elements
+const ChildrenExample = () => (
+  <Modal>
+    <Hello who='World' />
+  </Modal>
+);
+```
+
+_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>
+```
+
+## ModalLink
+
+Link and ModalRoute in one convenient component
+Renders a link that, when clicked, will navigate to the route that shows the modal.
+
+**Parameters**
+
+-   `props` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** 
+    -   `props.path` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** path to match
+    -   `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.parentPath` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** path to navigate to when backdrop is clicked
+    -   `props.linkClassName` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** class name to apply to <Link />
+    -   `props.modalClassName` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** class name to apply to modal container
+    -   `props.children` **Children** Link contents. Note that Modal content must be specified by the component property.
+    -   `props.component` **ReactComponent** Component to render in the modal.
+    -   `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.
+
+**Examples**
+
+_Example ModalLink_
+
+```javascript
+<ModalLink path='/hello' component={HelloComponent}>
+  Say Hello
+</ModalLink>
+```

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

219871

increased by4.69%

Number of package files

23

increased by15%

Number of lines in readme file

261

increased by903.85%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Lines of code

498

decreased by-5.5%

No dependency changes