diff --git a/examples/basic/app.js b/examples/basic/app.js index 52eb554a..51e64b32 100644 --- a/examples/basic/app.js +++ b/examples/basic/app.js @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'; import Modal from 'react-modal'; import SimpleUsage from './simple_usage'; import MultipleModals from './multiple_modals'; +import ReactRouter from './react-router'; const appElement = document.getElementById('example'); @@ -10,19 +11,26 @@ Modal.setAppElement('#example'); const examples = [ SimpleUsage, - MultipleModals + MultipleModals, + ReactRouter ]; -function App(props) { - return examples.map((example, key) => { - const ExampleApp = example.app; +class App extends Component { + render() { return ( -
-

{example.label}

- +
+ {examples.map((example, key) => { + const ExampleApp = example.app; + return ( +
+

{example.label}

+ +
+ ); + })}
); - }); + } } -ReactDOM.render(, appElement); +ReactDOM.render(, appElement); diff --git a/examples/basic/react-router/index.js b/examples/basic/react-router/index.js new file mode 100644 index 00000000..02f85781 --- /dev/null +++ b/examples/basic/react-router/index.js @@ -0,0 +1,47 @@ +import PropTypes from 'prop-types'; +import React, { Component } from 'react'; +import createHistory from 'history/createBrowserHistory'; +import { Router, Route, Switch } from 'react-router'; +import { Link } from 'react-router-dom'; +import Modal from 'react-modal'; + +const history = createHistory(); + +const Content = label => () =>

{`Content ${label}`}

; + +const shouldOpenModal = locationPath => /\bmodal\b/.test(locationPath); + +const ReactRouterModal = props => ( + history.push("/basic")}> +
+ Link A
+ Link B +
+ + + + +
+
+
+); + +class App extends Component { + render() { + return ( + +
+ Modal + +
+
+ ); + } +} + +export default { + label: "#3. react-modal and react-router.", + app: App +}; diff --git a/package.json b/package.json index eeef8456..d3f88361 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,8 @@ "npm-run-all": "^4.1.1", "react": "^15.6.1", "react-dom": "^15.6.1", + "react-router": "^4.2.0", + "react-router-dom": "^4.2.2", "should": "^13.1.0", "sinon": "next", "uglify-js": "3.1.1", diff --git a/webpack.config.js b/webpack.config.js index 9faa5d97..f02ecd31 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -29,7 +29,7 @@ module.exports = { output: { filename: '[name].js', chunkFilename: '[id].chunk.js', - path: 'examples/__build__', + path: path.resolve(__dirname, './examples/__build__'), publicPath: '/__build__/' }, @@ -46,7 +46,7 @@ module.exports = { }, plugins: [ - new webpack.optimize.CommonsChunkPlugin('shared.js'), + new webpack.optimize.CommonsChunkPlugin('shared'), new webpack.LoaderOptionsPlugin({ debug: true }) ]