Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
# cyclic-router
cyclic-router V5 is a routing library built for Cycle.js. Unlike previous versions, cyclic-router V5 is not a driver. It is a `main` function-wrapper (routerify) which relies on @cycle/history for driver source/sink interactions
cyclic-router V5 is a routing library built for Cycle.js. Unlike previous versions, cyclic-router V5 is not a driver. It is a `main` function-wrapper (routerify) which relies on @cycle/history for driver source/sink interactions.

For older versions of cyclic-router, V4 and earlier please go to the old [README](https://github.com/cyclejs-community/cyclic-router/blob/master/README_V4.md)

## Installation

Using [npm](https://www.npmjs.com/):

$ npm install --save @cycle/history # @cycle/history is a peerDependency of cyclic-router
$ npm install --saveDev @types/history # @cycle/history uses ReactTraining/history
# under the hood (For Typescript users only)
$ npm install --save cyclic-router

Routerify requires you to inject the route matcher. We'll use `switch-path` for our examples but other matching libraries could be adapted to be used here:
Expand Down Expand Up @@ -93,13 +96,17 @@ const routes = {
You can dynamically change route from code by emitting inputs handled by [the history driver](http://cycle.js.org/history/docs/#historyDriver).

```js
...
import sampleCombine from 'xstream/extra/sampleCombine'

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");
const replacePageClick$ = sources.DOM.select(".replace").events("click");

return {
// ...
Expand All @@ -118,6 +125,11 @@ function main(sources) {

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

// Replace the current history entry with the same path, but with new state info
replacePageClick$.compose(sampleCombine(sources.router.history$)).map(([_, route]) => {
return { type: 'replace', pathname: route.pathname, state: { some: "different state" } }
))
),
};
}
Expand Down