{"id":13726694,"url":"https://github.com/JulesGuesnon/LightRouter","last_synced_at":"2025-05-07T22:30:30.273Z","repository":{"id":125818645,"uuid":"250544924","full_name":"JulesGuesnon/LightRouter","owner":"JulesGuesnon","description":"💡 LightRouter is a router made for Revery","archived":true,"fork":false,"pushed_at":"2020-07-14T18:32:47.000Z","size":224,"stargazers_count":19,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-14T17:47:21.241Z","etag":null,"topics":["reason","reasonml","revery","router"],"latest_commit_sha":null,"homepage":"","language":"Reason","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JulesGuesnon.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-03-27T13:42:53.000Z","updated_at":"2023-01-27T21:17:48.000Z","dependencies_parsed_at":"2023-07-07T14:46:21.516Z","dependency_job_id":null,"html_url":"https://github.com/JulesGuesnon/LightRouter","commit_stats":{"total_commits":19,"total_committers":2,"mean_commits":9.5,"dds":"0.052631578947368474","last_synced_commit":"a2907265dacb2f345ea1ecb6882748e80bda6948"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JulesGuesnon%2FLightRouter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JulesGuesnon%2FLightRouter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JulesGuesnon%2FLightRouter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JulesGuesnon%2FLightRouter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JulesGuesnon","download_url":"https://codeload.github.com/JulesGuesnon/LightRouter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252965069,"owners_count":21832817,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["reason","reasonml","revery","router"],"created_at":"2024-08-03T01:03:16.889Z","updated_at":"2025-05-07T22:30:29.051Z","avatar_url":"https://github.com/JulesGuesnon.png","language":"Reason","funding_links":[],"categories":["Reason"],"sub_categories":[],"readme":"# :bulb: LightRouter\n\nLightRouter is a Router (pretty obvious right?) for [Revery](https://github.com/revery-ui/revery).\n\n## :zap: Requirements\n\n-   The reason native package manager [Esy](https://esy.sh/)\n\n## :wrench: Installation\n\n### Add the module\n\nIn the folder of the project, open a terminal and run:\n\n```bash\nesy add re-light-router\n```\n\n### Add it to dune\n\nIn your dune file add `LightRouter` in your `libraries`:\n\n```\n(...\n\t(libraries ... LightRouter)\n)\n```\n\n### Build\n\nWell now you just have to build:\n\n```bash\nesy build\n```\n\n## :fire: Usage\n\n**There's a complete example in the [example](/example) folder, you can take a look here if you wanna see a full application**\n\n### Create the router\n\nYou need to define the configuration of the router and then make one\n\n```reason\n/* Router.re */\nopen  LightRouter;\n\nmodule  RouterConfig  = {\n\t/* Define your routes */\n\ttype  route  =\n\t|  Home\n\t|  About\n\t|  Error(string);\n\n\t/* Set de the default one */\n\tlet  defaultRoute  =  Home;\n};\n\ninclude  Make(RouterConfig);\n```\n\n### Use it\n\nSetup the router where you want in your application:\n\n```reason\n/* App.re */\nopen Revery;\nopen Revery.UI;\n\n\nlet make = () =\u003e {\n\t...\n\t\u003cRouter\n\t\t/* Router is just a View that has as children the result of the render props */\n\t\t/* so you can pass your style if you want */\n\t\tstyle=Style.[\n\t\t\tbackgroundColor(Colors.red)\n\t\t]\n\t\trender={route =\u003e\n\t\t\tswitch (route) {\n\t\t\t|  Home  =\u003e  \u003cHome  /\u003e\n\t\t\t|  About  =\u003e  \u003cAbout  /\u003e\n\t\t\t|  Error(message) =\u003e  \u003cError  message  /\u003e\n\t\t\t}\n\t\t}\n\t/\u003e\n\t...\n}\n```\n\n### Change the route\n\nUse the `RouterLink` to redirect in your app:\n\n```reason\n/* Home.re */\nopen Revery;\nopen Revery.UI;\n\n\nlet make = () =\u003e {\n\t...\n\t\u003cRouter.RouterLink\n\t\tto_=Home\n\t\t/* onClick and style are not required */\n\t\tonClick={() =\u003e {\n\t\t\tprint_endline(\"Clicked\");\n\t\t\ttrue;\n\t\t}}\n\t\tstyle=Style.[...]\n\t\u003e\n\t\t\u003cText\n\t\t\tstyle=...\n\t\t\ttext=\"Link to home\"\n\t\t/\u003e\n\t\u003c/Router.RouterLink\u003e\n\t...\n}\n```\n\nYou probably noticed the `true` at the end of the `onClick`. This boolean allows you to prevent or allow the redirection.\n\n```reason\n/* Home.re */\nopen Revery;\nopen Revery.UI;\n\n\nlet make = () =\u003e {\n\t...\n\t\u003cRouter.RouterLink\n\t\tto_=Home\n\t\t/* onClick and style are not required */\n\t\tonClick={() =\u003e {\n\t\t\tprint_endline(\"You will never be redirected\");\n\t\t\t/* By returning false, it will prevent the redirection */\n\t\t\tfalse;\n\t\t}}\n\t\tstyle=Style.[...]\n\t\u003e\n\t\t\u003cText\n\t\t\tstyle=...\n\t\t\ttext=\"Link to home\"\n\t\t/\u003e\n\t\u003c/Router.RouterLink\u003e\n\t...\n}\n```\n\n### Retrieve the route in a component\n\nIf a component need an information about the route in your app, you can use the `useRoute` hook in order to get the current route and the name of it.\n\n```reason\n/* About.re */\nopen Revery;\nopen Revery.UI;\n\nlet stringOfRoute = route =\u003e {...}\n\nlet%component make = () =\u003e {\n\tlet%hook (route, redirect) = Router.useRoute();\n\t...\n\t\u003cText\n\t\tstyle=...\n\t\ttext={\"Current Route: \" ++ stringOfRoute(name)}\n\t/\u003e\n\t\u003cClickable onClick={_ =\u003e {\n\t\tprint_endline(\"Programmatic redirection\");\n\t\tredirect(Home);\n\t}}\u003e\n\t\t\u003cText\n\t\t\tstyle=...\n\t\t\ttext=\"Click me\"\n\t\t\u003e\n\t\u003c/Clickable\u003e\n\t...\n}\n```\n\n### Retrieve the route outside of a component\n\nYou may need the route outside of a component. You can subscribe to the route changes and trigger a callback every time the it changes:\n\n```reason\n/* NotAComponent.re */\nlet callMeOnRouteUpdate = (previousRoute, currentRoute) =\u003e {...}\n\n/* Calling `unsubscribe` wont call anymore callMeOnRouteUpdate */\nlet unsubscribe = Router.subscribe(callMeOnRouteUpdate);\n```\n\n### Programmatic redirection outside of component\n\nIf you need to redirect the user from a function that is not related to components, it's easy:\n\n```reason\n/* Somewhere.re */\n\nlet myFunction = () =\u003e {\n\tRouter.redirect(Home);\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJulesGuesnon%2FLightRouter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJulesGuesnon%2FLightRouter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJulesGuesnon%2FLightRouter/lists"}