Skip to content

Commit

Permalink
docs(README): Explain how to dynamically change route in README (#114)
Browse files Browse the repository at this point in the history
  • Loading branch information
nicoespeon authored and TylorS committed Aug 22, 2016
1 parent ce4f016 commit 5743a0b
Showing 1 changed file with 35 additions and 0 deletions.
35 changes: 35 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,3 +66,38 @@ const routes = {
'/:id': id => sources => YourComponent({props$: Observable.of({id}), ...sources})
}
```

### Dynamically change route

You can dynamically change route from code by emitting inputs handled by [the history driver](http://cycle.js.org/history/docs/#historyDriver).

```js
function main(sources) {
// ...
const homePageClick$ = sources.DOM.select(".home").events("click");
const previousPageClick$ = sources.DOM.select(".previous").events("click");
const nextPageClick$ = sources.DOM.select(".next").events("click");
const oldPageClick$ = sources.DOM.select(".old").events("click");
const aboutPageClick$ = sources.DOM.select(".about").events("click");

return {
// ...
router: xs.merge(
// Go to page "/"
homePageClick$.mapTo("/"),

// Go back to previous page
previousPageClick$.mapTo({ type: "goBack" }),

// Go forward to next page
nextPageClick$.mapTo({ type: "goForward" }),

// Go back from 5 pages
oldPageClick$.mapTo({ type: "go", value: -5 }),

// Go to page "/about" with some state set to router's location
aboutPageClick$.mapTo({ pathname: "/about", state: { some: "state" } })
),
};
}
```

0 comments on commit 5743a0b

Please sign in to comment.