mobx-history
Updated to 2.0.0 to use mobx v4 as peer dependency, enjoy it. Thanks to @kwoon and @ksandin Update to 2.0.1 to use history v4.9.0 @tregusti
Mobx wrapper of history, make it observable! mobx-history
object made three properties length
, location
, action
observable, so no more listener needed!
Installation
$ npm install --save mobx-historyor$ yarn add mobx-history
Use CDN
- Include mobx first https://unpkg.com/mobx/lib/mobx.umd.js
- The include https://unpkg.com/mobx-history/umd/mobx-history.js
Then get the History
class:
// using ES6 modules // using CommonJS modulesvar History = History // using CDNvar History = mobxHistoryHistory
Usage
Assuming you know how to use history
, if not, check its document.
Initalize mobx-history
with history
object:
let history = // or just change 'history' to 'mobx-history'var history = ;
Then use mobx-history
object like original history
object, so few code changed in transitioning history
to mobx-history
. Original history
object can be visited in property history
.
mobx-history
object made three properties length
, location
, action
observable, so no more listener needed. It also provide a location setter to perform history.location = ...
as history.push(...)
. call stopListen
method to stop listening from original history
.
Props
getter
length- type:
number
- type:
The number of entries in the history stack.
getter
location- type:
object
- type:
The current location. history.location=...
would trigger history.push(...)
getter
action- type:
string
- type:
The current navigation action.
- history
- type:
object
- type:
Original history
object.
- ...props
Other properties would be same as in original history
object. See history document
Demo
Live example is in Codepen
const createMemoryHistory = mobxHistorycreateMemoryHistory; const autorun = mobx; let h = ; ; ; ; ; // > pathname / // > action POP // > length 1 // > search hlocation = '/path'; // > pathname /path // > action PUSH // > length 2 h; // > print '/path2' // > length 3 h; // > pathname /path3 // > action REPLACE h; // > search ?q=1