useUrl hook for router (#338)

* useUrl hook for router * useLayoutEffect0
reasonml · Feb 19, 2019 · 0591ee2 · 0591ee2
2 parents 9758d49 + 4b3b228
commit 0591ee2
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 1 deletion.
diff --git a/lib/js/src/ReasonReact.js b/lib/js/src/ReasonReact.js
@@ -538,6 +538,22 @@ function unwatchUrl(watcherID) {
   }
 }
 
+function useUrl() {
+  var match = React.useState(url);
+  var setUrl = match[1];
+  React.useLayoutEffect((function () {
+          var watcherId = watchUrl((function (url) {
+                  return Curry._1(setUrl, (function () {
+                                return url;
+                              }));
+                }));
+          return (function () {
+                    return unwatchUrl(watcherId);
+                  });
+        }), ([]));
+  return match[0];
+}
+
 function useRecordApi(componentSpec) {
   var initialState = React.useMemo(componentSpec[/* initialState */10], ([]));
   var unmountSideEffects = React.useRef(/* array */[]);
@@ -647,7 +663,8 @@ var Router = [
   replace,
   watchUrl,
   unwatchUrl,
-  url
+  url,
+  useUrl
 ];
 
 exports.statelessComponent = statelessComponent;

diff --git a/src/ReasonReact.re b/src/ReasonReact.re
@@ -883,6 +883,17 @@ module Router = {
     | Some((window: Dom.window)) =>
       removeEventListener(window, "popstate", watcherID)
     };
+
+  let useUrl = () => {
+    let (url, setUrl) = React.useState(dangerouslyGetInitialUrl);
+
+    React.useLayoutEffect0(() => {
+      let watcherId = watchUrl(url => setUrl(_ => url));
+      Some(() => unwatchUrl(watcherId));
+    });
+
+    url;
+  };
 };
 
 type sidEffectualState('state, 'retainedProps, 'action) = {

diff --git a/src/ReasonReact.rei b/src/ReasonReact.rei
@@ -254,6 +254,8 @@ module Router: {
       for an example.
       */
   let dangerouslyGetInitialUrl: unit => url;
+  /** hook for watching url changes */
+  let useUrl: unit => url;
 };
 
 [@bs.module "react"] external fragment: 'a = "Fragment";