diff --git a/bsconfig.json b/bsconfig.json
index 97d6b1c..2a6da91 100644
--- a/bsconfig.json
+++ b/bsconfig.json
@@ -4,7 +4,7 @@
"refmt": 3,
"bs-dependencies": ["reason-react"],
"reason": {
- "react-jsx": 2
+ "react-jsx": 3
},
"namespace": false,
"sources": [
diff --git a/package.json b/package.json
index 7fa8849..27feb94 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "reason-reroute",
- "version": "0.0.4",
+ "version": "0.0.5",
"description": "Tiny wrapper around ReasonReact.Router ",
"main": "index.js",
"scripts": {
@@ -27,7 +27,7 @@
},
"homepage": "https://github.com/callstack/reroute#readme",
"devDependencies": {
- "bs-platform": "^4.0.3",
- "reason-react": "^0.5.3"
+ "bs-platform": "^5.0.4",
+ "reason-react": "^0.7.0"
}
}
diff --git a/src/ReRoute.re b/src/ReRoute.re
index 889d8b5..78b140e 100644
--- a/src/ReRoute.re
+++ b/src/ReRoute.re
@@ -5,46 +5,74 @@ module type RouterConfig = {
};
module CreateRouter = (Config: RouterConfig) => {
- module Container = {
- type action =
- | ChangeRoute(Config.route);
- type state = Config.route;
- let component = ReasonReact.reducerComponent("CallstackRerouteRouter");
- let make = children => {
- ...component,
- initialState: () =>
- ReasonReact.Router.dangerouslyGetInitialUrl() |> Config.routeFromUrl,
- reducer: (action, _state) =>
- switch (action) {
- | ChangeRoute(route) => ReasonReact.Update(route)
- },
- didMount: self => {
+ let useRouter = () => {
+ let (currentRoute: Config.route, setCurrentRoute) =
+ React.useState(() =>
+ ReasonReact.Router.dangerouslyGetInitialUrl() |> Config.routeFromUrl
+ );
+ React.useEffect1(
+ () => {
let watcherID =
ReasonReact.Router.watchUrl(url =>
- self.send(ChangeRoute(url |> Config.routeFromUrl))
+ setCurrentRoute(_old => url |> Config.routeFromUrl)
);
- self.onUnmount(() => ReasonReact.Router.unwatchUrl(watcherID));
+ Some(() => ReasonReact.Router.unwatchUrl(watcherID));
},
- render: self => children(~currentRoute=self.state),
+ [||],
+ );
+ currentRoute;
+ };
+
+ module Container = {
+ [@react.component]
+ let make = (~children) => {
+ let currentRoute = useRouter();
+ children(~currentRoute);
+ };
+
+ module Jsx2 = {
+ let component = ReasonReact.statelessComponent("RouterContainer");
+
+ let make = children =>
+ ReasonReactCompat.wrapReactForReasonReact(
+ make,
+ makeProps(~children, ()),
+ children,
+ );
};
};
module Link = {
- let component = ReasonReact.statelessComponent("CallstackRerouteLink");
- let make = (~route, children) => {
- ...component,
- render: _self => {
- let href = Config.routeToUrl(route);
- {
- event->ReactEvent.Synthetic.preventDefault;
- ReasonReact.Router.push(href);
- }
- )>
- (ReasonReact.array(children))
- ;
- },
+ [@react.component]
+ let make = (~route, ~className=?, ~children) => {
+ let href = Config.routeToUrl(route);
+ {
+ event->ReactEvent.Synthetic.preventDefault;
+ ReasonReact.Router.push(href);
+ }
+ }>
+ children
+ ;
+ };
+
+ module Jsx2 = {
+ let component = ReasonReact.statelessComponent("Link");
+
+ let make =
+ (~route, ~className=?, children: array(ReasonReact.reactElement)) =>
+ ReasonReactCompat.wrapReactForReasonReact(
+ make,
+ makeProps(
+ ~route,
+ ~className?,
+ ~children=React.array(children),
+ (),
+ ),
+ React.array(children),
+ );
};
};
-};
\ No newline at end of file
+};