added rx.js example

nhsiehgit · Nov 22, 2014 · 86d3611 · 86d3611
1 parent f248a7b
commit 86d3611
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 1 deletion.
diff --git a/examples/index.html b/examples/index.html
@@ -12,6 +12,7 @@ <h1>React Router Examples</h1>
 <li><a href="master-detail/index.html">Master Detail</a></li>
 <li><a href="partial-app-loading/index.html">Partial App Loading</a></li>
 <li><a href="query-params/index.html">Query Params</a></li>
+<li><a href="rx/index.html">Reactive Extensions</a></li>
 <li><a href="shared-root/index.html">Shared Root</a></li>
 <li><a href="sidebar/index.html">Sidebar</a></li>
 <li><a href="simple-master-detail/index.html">Simple Master Detail</a></li>

diff --git a/examples/rx/app.js b/examples/rx/app.js
@@ -0,0 +1,46 @@
+var React = require('react');
+var Router = require('react-router');
+var { Route, Redirect, RouteHandler, Link } = Router;
+var Rx = require('rx');
+
+var App = React.createClass({
+  render () {
+    return (
+      <div>
+        <ul>
+          <li><Link to="user" params={{userId: "123"}}>Bob</Link></li>
+          <li><Link to="user" params={{userId: "abc"}}>Sally</Link></li>
+        </ul>
+        <RouteHandler/>
+      </div>
+    );
+  }
+});
+
+var User = React.createClass({
+  mixins: [ Router.State ],
+
+  render () {
+    var { userId } = this.getParams();
+    return (
+      <div className="User">
+        <h1>User id: {userId}</h1>
+      </div>
+    );
+  }
+});
+
+var routes = (
+  <Route path="/" handler={App}>
+    <Route name="user" path="/user/:userId" handler={User}/>
+  </Route>
+);
+
+var source = Rx.Observable.fromEventPattern(function(h) {
+  Router.run(routes, h);  
+});
+
+source.subscribe(function (Handler) {
+  React.render(<Handler/>, document.getElementById('example'))
+});
+
diff --git a/examples/rx/index.html b/examples/rx/index.html
@@ -0,0 +1,9 @@
+<!doctype html public "restroom">
+<title>Reactive Extenstions Example</title>
+<link href="../global.css" rel="stylesheet"/>
+<body>
+<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Reactive Extensions</h1>
+<div id="example"/>
+<script src="/__build__/shared.js"></script>
+<script src="/__build__/rx.js"></script>
+
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "browserify-shim": "3.6.0",
     "bundle-loader": "0.5.1",
     "envify": "1.2.0",
+    "events": "1.0.2",
     "expect": "0.1.1",
     "jsx-loader": "0.12.0",
     "karma": "0.12.16",
@@ -37,6 +38,7 @@
     "react": "0.12.x",
     "reactify": "0.15.x",
     "rf-release": "0.3.2",
+    "rx": "2.3.18",
     "uglify-js": "2.4.15",
     "webpack": "1.4.5",
     "webpack-dev-server": "1.6.5"
@@ -63,4 +65,4 @@
   "browserify-shim": {
     "react": "global:React"
   }
-}
+}