Route Example

example/package.json

@@ -7,12 +7,12 @@
   },
   "dependencies": {
     "react": "^15.3.2",
-    "react-dom": "^15.3.2"
+    "react-dom": "^15.3.2",
+    "react-router": "^3.0.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
 }

example/src/index.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+import { browserHistory } from 'react-router';
+import Routes from './router';
 import './index.css';
 
 ReactDOM.render(
-  <App />,
+  <Routes history={browserHistory}/>,
   document.getElementById('root')
 );

example/src/App.css → example/src/pages/App.css

@@ -1,7 +1,3 @@
-.App {
-  text-align: center;
-}
-
 .App-logo {
   animation: App-logo-spin infinite 20s linear;
   height: 80px;
@@ -12,6 +8,11 @@
   height: 150px;
   padding: 20px;
   color: white;
+  text-align: center;
+}
+
+.App-body {
+  margin: 10px;
 }
 
 .App-intro {

example/src/pages/App.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+import ReactImageMagnify from '../../../dist/ReactImageMagnify';
+
+class App extends Component {
+    render() {
+        return (
+            <div className="App">
+                <div className="App-header">
+                    <img src={logo} className="App-logo" alt="logo" />
+                    <h2>React Image Magnify</h2>
+                </div>
+                <div className="App-body">
+                    <p className="App-intro">
+                        Roll over image to enlarge.
+                    </p>
+                  <ReactImageMagnify {...{
+                      largeImage: {
+                          alt: 'hello large image',
+                          src: 'https://goo.gl/Bi9OCm',
+                          width: 1200,
+                          height: 672
+                      },
+                      smallImage: {
+                          alt: 'hello small image',
+                          src: 'https://goo.gl/Bi9OCm',
+                          width: 300,
+                          height: 168
+                      }
+                  }} />
+                </div>
+            </div>
+        );
+    }
+}
+
+export default App;

example/src/pages/Touch.js

@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+import ReactImageMagnifyTouch from '../../../dist/ReactImageMagnifyTouch';
+
+class App extends Component {
+    render() {
+        return (
+            <div className="App">
+                <div className="App-header">
+                    <img src={logo} className="App-logo" alt="logo" />
+                    <h2>React Image Magnify</h2>
+                </div>
+                <div className="App-body">
+                    <p className="App-intro">Press (long touch) image to magnify. Pan (drag) to traverse image.</p>
+                    <p style={{display: 'none'}} className="App-intro">Note the page can be scrolled when touch begins on image.</p>
+                    <ReactImageMagnifyTouch {...{
+                        enlargedImageContainerStyle: {
+                            left: '0px',
+                            border: 'none',
+                            margin: '0px'
+                        },
+                        largeImage: {
+                            alt: 'hello large image',
+                            src: 'https://goo.gl/Bi9OCm',
+                            width: 1200,
+                            height: 672
+                        },
+                        smallImage: {
+                            alt: 'hello small image',
+                            src: 'https://goo.gl/Bi9OCm',
+                            width: 300,
+                            height: 168
+                        }
+                    }} />
+                </div>
+            </div>
+        );
+    }
+}
+
+export default App;

example/src/router.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Router, Route } from 'react-router';
+
+import App from './pages/App';
+import Touch from './pages/Touch';
+
+const Routes = (props) => (
+    <Router {...props}>
+        <Route path="/" component={App} />
+        <Route path="/touch" component={Touch} />
+    </Router>
+);
+
+export default Routes;