mobx-react-router-utils
Routing utils to use with RouterStore (from `mobx-react-router`) on your MobX stores.
Version 4.2.0 License ISC
INSTALL
Type:
Version:
- Static
- Latest Patch
- Latest Minor
- Latest Major
- 4.2.0
- 4.1.4
- 4.1.3
- 4.1.2
- 4.1.1
- 4.1.0
- 4.0.0
- 3.2.0
- 3.1.9
- 3.1.8
- 3.1.7
- 3.1.6
- 3.1.5
- 3.1.4
- 3.1.3
- 3.1.1
- 3.1.0
- 3.0.8
- 3.0.6
- 3.0.5
- 3.0.4
- 3.0.3
- 3.0.2
- 3.0.1
- 3.0.0
- 2.1.0
- 2.0.3
- 2.0.2
- 2.0.1
- 2.0.0
- 1.3.0
- 1.2.0
- 1.1.0
- 1.0.27
- 1.0.26
- 1.0.25
- 1.0.24
- 1.0.23
- 1.0.22
- 1.0.21
- 1.0.20
- 1.0.19
- 1.0.18
- 1.0.17
- 1.0.16
- 1.0.15
- 1.0.14
- 1.0.13
- 1.0.12
- 1.0.11
- 1.0.10
- 1.0.9
- 1.0.8
- 1.0.7
- 1.0.6
- 1.0.5
- 1.0.4
- 1.0.3
- 1.0.1
- 1.0.0
- 4.1.2-rc1
- 4.1.0-rc1
- 3.3.0-rc1
<script src=" https://cdn.jsdelivr.net/npm/mobx-react-router-utils@4.2.0/dist/index.min.js "></script>
MobX React Router Utils
Routing utils to use with RouterStore (from mobx-react-router
) on your MobX stores.
Install it
yarn add mobx-react-router-utils
Use it
import { computedRouteParam, setRoutingStore } from 'mobx-react-router-utils'
// Set the reference to your routing store before any usage
// You ony need to this once in your application
setRoutingStore(routingStore)
const routes = {
search: '/search',
citySearch: '/cities/:city'
}
class DemoSearchStore {
city = computedRouteParam('city', {
patterns: [routes.citySearch],
})
// this one will come from the query string
checkIn = computedRouteParam('checkIn', {
// Define the route patterns for which this one is valid
patterns: [routes.search, routes.citySearch],
// Set a parsing fn to transform from string
parse: _parseDate,
// Set a formatting fn to transform into string
format: _formatDate,
// It'll return the default value in case it's
// not present on the route or with an empty value
defaultValue: 'temecula'
})
checkOut = computedRouteParam('checkOut', {
patterns: [routes.search, routes.citySearch],
parse: _parseDate,
format: _formatDate,
})
setCity = (city: Maybe<string>) => {
// For updating the current route, push() and replace() methods are available:
// - push: will add the new url to the browsing history
// - replace: will replace the current url on the browsing history
this.city.push(city, {
// enforce a route pattern if needed, otherwise, it will use the
// current location (if matches the config) or first pattern available
pattern: !city && routes.search,
// cleanup all other params (default: false)
cleanParams: true,
// OR cleanup only selected params
cleanParams: [
this.checkIn,
this.checkOut
]
})
}
setPeriod = (checkIn: Maybe<Date>, checkOut: Maybe<Date>) => {
this.checkIn.push(checkIn)
this.checkOut.replace(checkOut)
}
// ...
}