reason-navigation
reason navigation
Last updated 3 years ago by kennetpostigo .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install reason-navigation 
SYNC missed versions from official npm registry.

reason-navigation

Install

yarn install reason-navigation

bsconfig

"bs-dependencies": [
  "reason-react",
  "reason-navigator"
]

Example

let component = ReasonReact.statelessComponent("App");

let make = (_children) => {
  ...component,
  render: (_self) =>
    <Router>
      (
        (match) =>
          <div>
            <h1> (U.se("Reason Router")) </h1>
            <Link match href="/game"> (U.se("GAME")) </Link>
            <Route match path="/" render=(() => <Landing match />) />
            <Route match path="/game" render=(() => <Canvas match />) />
            <Route
              match
              path="/re/:id"
              render=(
                () => {
                  switch (Match.getInt(match.state.params, "id")) {
                  | Some(v) => Js.log(v)
                  | None => Js.log("None")
                  };
                  <p> (ReasonReact.stringToElement("Query params!")) </p>
                }
              )
            />
            <Route match path="/highscores" render=(() => <HighScore match />) />
          </div>
      )
    </Router>
};

Navigation Components

<Router children: (history) => 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 <div /> that wraps a bunch of child <Route /> components.

<Route history: Router.history path: string render: unit => 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 history: Router.history href: string target: string />

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.

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.

switch (Match.getString(match.state.params, "id")) {
| Some(v) => Js.log(v)
| None => Js.log("None")
};

Types

Router.state

type state = {
  path: string,
  search: string,
  hash: string,
  params: Js.Dict.t(string),
  unlisten: [@bs] (unit => unit)
};

Router.actions

type actions = {
  push: string => unit,
  replace: string => unit,
  updateMatch: (string, string, Js.Dict.t(string)) => unit
};

Router.history

type history = {
  state,
  actions
};

Current Tags

  • 0.5.0-beta.1                                ...           beta (3 years ago)
  • 0.4.1                                ...           latest (3 years ago)

15 Versions

  • 0.5.0-beta.1                                ...           3 years ago
  • 0.4.1                                ...           3 years ago
  • 0.4.0                                ...           3 years ago
  • 0.3.9                                ...           3 years ago
  • 0.3.8                                ...           3 years ago
  • 0.3.7                                ...           3 years ago
  • 0.3.6                                ...           3 years ago
  • 0.3.5                                ...           3 years ago
  • 0.3.4                                ...           3 years ago
  • 0.3.3                                ...           3 years ago
  • 0.3.2                                ...           3 years ago
  • 0.3.1                                ...           3 years ago
  • 0.3.0                                ...           3 years ago
  • 0.2.0                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 1
Last Day 0
Last Week 0
Last Month 0
Dependencies (2)
Dev Dependencies (1)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |