Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dckt/rescript-router
a fast, declarative microrouter for rescript based on reroute works
https://github.com/dckt/rescript-router
navigation react rescript rescript-react router routing
Last synced: 23 days ago
JSON representation
a fast, declarative microrouter for rescript based on reroute works
- Host: GitHub
- URL: https://github.com/dckt/rescript-router
- Owner: DCKT
- Created: 2019-07-11T19:24:47.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-05-21T19:42:43.000Z (8 months ago)
- Last Synced: 2024-10-25T23:06:29.446Z (3 months ago)
- Topics: navigation, react, rescript, rescript-react, router, routing
- Language: ReScript
- Homepage:
- Size: 286 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# ReScript Router
This is project is based on the great old [reroute](https://github.com/callstackincubator/reroute) module.
It's just using the latest Reason React API (hooks & context).
[Checkout this simple demo](https://nifty-leakey-46cc44.netlify.com)
## Setup
Install the module :
```bash
$ yarn add @dck/rescript-router
```
Then add it to your `bsconfig.json`:
```json
{
"bs-dependencies": ["@rescript/react", "@dck/rescript-router"]
}
```
## Usage
### Create your configuration
```rescript
open RescriptRouter
module RouterConfig = {
type t =
| Home
| About
| Hello(string)
| NotFound
let make = (url: RescriptReactRouter.url) =>
switch url.path {
| list{} => Home
| list{"about"} => About
| list{"hello", name} => Hello(name)
| list{"404"}
| _ =>
NotFound
}
let toString = (route: t) =>
switch route {
| Home => "/"
| About => "/about"
| Hello(name) => "/hello/" ++ name
| NotFound => "/404"
}
}
module Router = CreateRouter(RouterConfig)
```
### Add the Provider
```rescript
module App = {
@react.component
let make = () =>
{(~currentRoute) => <>
{"RescriptRouter example"->React.string}
{"Home"->React.string}
{"About"->React.string}
{"Route with params"->React.string}
{switch currentRoute {
| RouterConfig.Home => {"Home"->React.string}
| RouterConfig.About => {"About"->React.string}
| RouterConfig.Hello(name) =>
{"Route with params"->React.string}
{("Hi : " ++ name)->React.string}
| _ => {"404 not found"->React.string}
}}
>}
}
```
### Use built-in Link module
Don't forget to use it inside the Provider 😉
```rescript
module CustomLink = {
@react.component
let make = (~route: RouterConfig.t, ~children) => {
children
}
}
```
### Full example
```rescript
open RescriptRouter
module RouterConfig = {
type t =
| Home
| About
| Hello(string)
| NotFound
let make = (url: RescriptReactRouter.url) =>
switch url.path {
| list{} => Home
| list{"about"} => About
| list{"hello", name} => Hello(name)
| list{"404"}
| _ =>
NotFound
}
let toString = (route: t) =>
switch route {
| Home => "/"
| About => "/about"
| Hello(name) => "/hello/" ++ name
| NotFound => "/404"
}
}
module Router = CreateRouter(RouterConfig)
module CustomLink = {
@react.component
let make = (~route: RouterConfig.t, ~children) => {
children
}
}
module App = {
@react.component
let make = () =>
{(~currentRoute) => <>
{"RescriptRouter example"->React.string}
{"Home"->React.string}
{"About"->React.string}
{"Route with params"->React.string}
{switch currentRoute {
| RouterConfig.Home => {"Home"->React.string}
| RouterConfig.About => {"About"->React.string}
| RouterConfig.Hello(name) =>
{"Route with params"->React.string}
{("Hi : " ++ name)->React.string}
| _ => {"404 not found"->React.string}
}}
>}
}
```
## Run demo
Install dependencies
```
yarn
```
Compiles ReScript files
```
yarn start
```
Run webpack-dev-server
```
yarn demo
```
Go to `http://localhost:8000`