https://github.com/tsnobip/isotrope
An experimental safe bi-directional router for ReasonReact
https://github.com/tsnobip/isotrope
Last synced: 4 months ago
JSON representation
An experimental safe bi-directional router for ReasonReact
- Host: GitHub
- URL: https://github.com/tsnobip/isotrope
- Owner: tsnobip
- Archived: true
- Created: 2020-05-16T13:03:58.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T18:20:32.000Z (about 3 years ago)
- Last Synced: 2025-01-15T23:59:23.066Z (about 1 year ago)
- Language: Reason
- Homepage:
- Size: 782 KB
- Stars: 12
- Watchers: 2
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-list - isotrope - directional router for ReasonReact | tsnobip | 11 | (Reason)
README
# Isotrope
Isotrope is a very basic experiment of a safe bi-directional router in ReasonReact thanks to [@anuragsoni/routes](https://github.com/anuragsoni/routes) awesome routing lib.
Define your routes once and use them both ways.
## Install
```
yarn add @tsnobip/isotrope @anuragsoni/routes
```
And add `@tsnobip/isotrope` and `@anuragsoni/routes` to the `bs-dependencies` of `bsconfig.json`.
## Usage
You can refer to the [example](https://github.com/tsnobip/isotrope/tree/master/example) folder for a working example.
Start with defining your route patterns (more info in [@anuragsoni/routes docs](https://github.com/anuragsoni/routes)), for example in `Targets.re`:
```reason
open! Routes;
let root = () => empty;
let users = () => s("users") /? nil;
let greeting = () => s("greeting") / str / str /? nil;
```
Then create the router by connecting a function to each route pattern:
```reason
module MyRoutes = {
open Routes;
let rootRoute = () => Targets.root() @--> ;
let usersRoute = () => Targets.users() @--> ;
let greetingRoute = () =>
Targets.greeting() @--> ((name, greeting) => );
let routes = one_of([rootRoute(), usersRoute(), greetingRoute()]);
};
```
You can then use your router this way:
```reason
let target = Isotrope.Hooks.useUrl();
switch (Routes.match'(MyRoutes.routes, ~target)) {
| Some(element) => element
| None =>
};
```
You can also safely generate a url like this:
```reason
open Isotrope;
{React.string("World")}
```
## Remaining tasks
- [ ] add support for hashes and query parameters
- [ ] better integration of @anurasgoni/Routes