Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kennetpostigo/reason-navigation
Declarative Routing for ReasonReact
https://github.com/kennetpostigo/reason-navigation
navigation react reason-react reasonml router routing
Last synced: about 1 month ago
JSON representation
Declarative Routing for ReasonReact
- Host: GitHub
- URL: https://github.com/kennetpostigo/reason-navigation
- Owner: kennetpostigo
- License: mit
- Created: 2017-04-25T12:42:00.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-12-13T13:31:34.000Z (almost 7 years ago)
- Last Synced: 2024-09-13T23:22:00.360Z (2 months ago)
- Topics: navigation, react, reason-react, reasonml, router, routing
- Language: JavaScript
- Homepage:
- Size: 98.6 KB
- Stars: 11
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: License.md
Awesome Lists containing this project
README
reason-navigation
## Install
```bash
yarn install reason-navigation
```
## bsconfig
```json
"bs-dependencies": [
"reason-react",
"reason-navigation"
]
```
## Example
```reason
let component = ReasonReact.statelessComponent("App");
let make = (_children) => {
...component,
render: (_self) =>
(
(history) =>
(U.se("Reason Router"))
(U.se("GAME"))
) />
) />
{
switch (Match.getInt(history.state.params, "id")) {
| Some(v) => Js.log(v)
| None => Js.log("None")
};
(ReasonReact.stringToElement("Query params!"))
}
)
/>
) />
)
};
```
## Navigation Components
### ` ReasonReact.element/>`
Router takes a function as a child, with a parameter that is passed a history
object. The body should be a single reason-react component, like a `
`
that wraps a bunch of child `` components.
### ` ReasonReact.element />`
Route needs to be passed the `Router.history` record that contains data in order
to determine whether it should render on a certain path or not. It also requires
a `path` that the route needs to match against, and lastly a `render` function
that passes query params and other data that is useful.
### ``
Link needs to be passed the `Router.history` record that contains actions to
update the browser location. It also takes an `href` to determine where to go
when the link is pressed. and lastly takes a target to determine where to open
the link.
## Query Params
When accessing query params, you should use the query accessors that
`reason-navigation` provides.
### `getInt(params: Js.Dict.t(string), field: string) => option(int)`
It will return `Some(int)` if they field you are accessing is present and an
`int`.
```reason
switch (Match.getInt(match.state.params, "id")) {
| Some(v) => Js.log(v)
| None => Js.log("None")
};
```
### `getString(params: Js.Dict.t(string), field: string) => option(string)`
It will return `Some(string)` if they field you are accessing is present and an
`string`.
```reason
switch (Match.getString(match.state.params, "id")) {
| Some(v) => Js.log(v)
| None => Js.log("None")
};
```
## Types
### Router.state
```reason
type state = {
path: string,
search: string,
hash: string,
params: Js.Dict.t(string),
unlisten: [@bs] (unit => unit)
};
```
### Router.actions
```reason
type actions = {
push: string => unit,
replace: string => unit,
updateMatch: (string, string, Js.Dict.t(string)) => unit
};
```
### Router.history
```reason
type history = {
state,
actions
};
```