New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-router-modal
Advanced tools
react-router-modal - npm Package Compare versions
Comparing version 1.1.4 to 1.1.5
@@ -5,2 +5,3 @@ <!-- Generated by documentation.js. Update this documentation by updating the source code. --> | ||
| - [index](#index) | ||
| - [ModalContainer](#modalcontainer) | ||
@@ -11,2 +12,37 @@ - [ModalLink](#modallink) | ||
| ## index | ||
| **Examples** | ||
| _TL;DR_ | ||
| ```javascript | ||
| 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> | ||
| ); | ||
| } | ||
| ``` | ||
| ## ModalContainer | ||
@@ -47,6 +83,9 @@ | ||
| /> | ||
| ``` | ||
| _DOM structure_ | ||
| 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'> | ||
| ```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> | ||
@@ -53,0 +92,0 @@ <div className={backdropClassName} /> |
@@ -25,3 +25,32 @@ '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']; |
| { | ||
| "name": "react-router-modal", | ||
| "version": "1.1.4", | ||
| "version": "1.1.5", | ||
| "description": "simple react router modal", | ||
@@ -40,2 +40,3 @@ "main": "lib/index.js", | ||
| "chai-enzyme": "^0.7.1", | ||
| "documentation": "4.0.0-rc.1", | ||
| "enzyme": "^2.8.2", | ||
@@ -55,5 +56,3 @@ "eslint": "^3.19.0", | ||
| }, | ||
| "dependencies": { | ||
| "documentation": "4.0.0-rc1" | ||
| } | ||
| "dependencies": {} | ||
| } |
186
README.md
@@ -5,6 +5,6 @@ ## react-router-modal | ||
| 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 | ||
| Component docs: https://github.com/davidmfoley/react-router-modal/blob/master/docs/react-router-modal.md | ||
| ### Installation | ||
@@ -27,183 +27,1 @@ | ||
| ### Components | ||
| #### ModalContainer | ||
| ModalContainer contains all modals that are shown. Typically you will want to mount this just before your closing `</body>` tag. | ||
| Nothing will be rendered into the dom if no modals are currently shown. | ||
| ``` | ||
| <ModalContainer | ||
| bodyModalOpenClassName='modal-open' | ||
| containerClassName='modal-container' | ||
| backdropClassName='modal-backdrop' | ||
| modalClassName='modal' | ||
| /> | ||
| ``` | ||
| ##### props | ||
| ###### `bodyModalOpenClassName` | ||
| Class name to set on the `<body>` when a modal is mounted. Typically used to prevent default scroll behavior, etc. | ||
| Defaults to `react-router-modal__modal-open` | ||
| ###### `containerClassName` | ||
| Class name for the modal container element. Note that this element is only rendered when at least one modal is shown. | ||
| Defaults to `react-router-modal__modal-container` | ||
| ###### `backdropClassName` | ||
| Class name for the modal backdrop element(s) that are show behind each modal. | ||
| Defaults to `react-router-modal__modal-backdrop` | ||
| ###### `modalClassName` | ||
| Class name for the modal element(s) that wrap the modal content. Can be overridden by the `className` property on `<ModalRoute />` or `<Modal />` | ||
| Defaults to `react-router-modal__modal` | ||
| #### ModalRoute | ||
| ModalRoute attaches a component to a route in react-router (version 4). When the route is matched, the component is rendered in a modal element. | ||
| ``` | ||
| <ModalRoute | ||
| className='image-detail-modal' | ||
| component={MyImageDetailComponent} | ||
| props={ { foo: 'bar'} } | ||
| path='*/images/:imageId' | ||
| /> | ||
| ``` | ||
| ##### props | ||
| ###### path | ||
| The path to match. See react-router docs. | ||
| ###### component | ||
| The component to render inside the modal when the path is matched. | ||
| ###### exact | ||
| Only match on exact route match. See react-router docs. | ||
| ###### props | ||
| Properties to be passed to the component when the route is matched. | ||
| The react-router props `location', 'history', and 'match` will also be included. | ||
| ###### className | ||
| If set, overrides the `modalClassName` property on the `ModalContainer` | ||
| When the route matches, the component will be shown inside a modal. | ||
| If multiple routes match, the modals will be stacked based on the length of the path that is matched. | ||
| #### ModalLink | ||
| ModalLink provides a simple way to create a ModalRoute and a Link at the same time. | ||
| ##### props | ||
| ###### path | ||
| The path to match. | ||
| ###### component | ||
| The component to render inside the modal when the path is matched. | ||
| Note that children are rendered in the Link, not in the modal as with other components. | ||
| ###### exact | ||
| Only match on exact route match. See react-router docs. | ||
| ###### props | ||
| Properties to be passed to the component when the route is matched. | ||
| The react-router props `location', 'history', and 'match` will also be included. | ||
| ###### linkClassName | ||
| className for the Link. | ||
| ###### modalClassName | ||
| className for the Modal. | ||
| #### Modal | ||
| If you want to show a modal without a route, you can use this. Modals shown this way default to stacking on top of modals shown with ModalRoute. | ||
| ``` | ||
| <div> | ||
| <Modal | ||
| className='top-component-modal' | ||
| component={MyTopComponent} | ||
| props={ { foo: 'bar'} } | ||
| stackOrder={2} | ||
| /> | ||
| <Modal | ||
| component={MyBottomComponent} | ||
| props={ { bar: 'baz'} } | ||
| stackOrder={1} | ||
| /> | ||
| </div> | ||
| ``` | ||
| ##### props | ||
| ###### component | ||
| The component to render inside the modal when the path is matched. | ||
| ###### props | ||
| Properties to be passed to the component rendered inside the modal. | ||
| ###### stackOrder | ||
| Controls the order the modals are stacked. Higher number means "on top". | ||
| If not set, modals will default to stacking in the order they are mounted. | ||
| ###### className | ||
| className used on the modal. Defaults to the `modalClassName` property on the `ModalContainer` | ||
| ### CSS | ||
| Default css is included in `css/react-router-modal.css`. You can use this as a basis for your own modal styles. | ||
| #### Example functional component | ||
| ``` | ||
| import { ModalContainer, ModalRoute, Modal } 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/bar'>Bar on top of Foo</Link> | ||
| <Link to='/bar/foo'>Foo on top of Bar</Link> | ||
| <Link to='/foo'>just foo</Link> | ||
| <Link to='/bar'>just 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> | ||
| ); | ||
| } | ||
| ``` |
No alert changes
Improved metrics
- Dependency count
- decreased by-25%
3
- Lines of code
- increased by69.05%
71
Worsened metrics
- Total package byte prevSize
- decreased by-19.57%
13147
- Dev dependency count
- increased by4%
26
- Number of lines in readme file
- decreased by-87.5%
26
Dependency changes
- Removeddocumentation@4.0.0-rc1