Skip to content

Commit 6683aba

Browse files
authored
fix(README): Add peer dependency instructions
1 parent 3b6e376 commit 6683aba

File tree

1 file changed

+13
-1
lines changed

1 file changed

+13
-1
lines changed

README.md

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
# cyclic-router
2-
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
2+
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.
33

44
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)
55

66
## Installation
77

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

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

1215
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:
@@ -93,13 +96,17 @@ const routes = {
9396
You can dynamically change route from code by emitting inputs handled by [the history driver](http://cycle.js.org/history/docs/#historyDriver).
9497

9598
```js
99+
...
100+
import sampleCombine from 'xstream/extra/sampleCombine'
101+
96102
function main(sources) {
97103
// ...
98104
const homePageClick$ = sources.DOM.select(".home").events("click");
99105
const previousPageClick$ = sources.DOM.select(".previous").events("click");
100106
const nextPageClick$ = sources.DOM.select(".next").events("click");
101107
const oldPageClick$ = sources.DOM.select(".old").events("click");
102108
const aboutPageClick$ = sources.DOM.select(".about").events("click");
109+
const replacePageClick$ = sources.DOM.select(".replace").events("click");
103110

104111
return {
105112
// ...
@@ -118,6 +125,11 @@ function main(sources) {
118125

119126
// Go to page "/about" with some state set to router's location
120127
aboutPageClick$.mapTo({ pathname: "/about", state: { some: "state" } })
128+
129+
// Replace the current history entry with the same path, but with new state info
130+
replacePageClick$.compose(sampleCombine(sources.router.history$)).map(([_, route]) => {
131+
return { type: 'replace', pathname: route.pathname, state: { some: "different state" } }
132+
))
121133
),
122134
};
123135
}

0 commit comments

Comments
 (0)