feat: add trigger once option (#2)

Adds the possibility to add an `options`-record which currently only has `once` as a parameter. Thanks to @eschaefer!

Author: eschaefer

Diff for: README.md

@@ -23,6 +23,8 @@ Add `bs-react-is-visible` to `bs-dependencies` in `bsconfig.json`
 
 ## Usage
 
+### Basic
+
 ```reason
 [@react.component]
 let make = () => {
@@ -34,6 +36,19 @@ let make = () => {
 };
 ```
 
+### With options
+
+```reason
+[@react.component]
+let make = () => {
+  let (isVisible, ref) = ReactIsVisible.useIsVisible(~options={once: true}, ());
+
+  <h1 ref>
+    {(isVisible ? "I'm triggered as visible once!" : "I'm not visible") |> React.string}
+  </h1>;
+};
+```
+
 ## Polyfill
 
 [Browser compatibility.](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Browser_compatibility)

Diff for: examples/App.re

@@ -64,7 +64,14 @@ let make = () => {
         style={Style.link(active === "lazyload")}>
         {"Lazy Load" |> React.string}
       </a>
+      <a
+        href="#triggeronce"
+        title="TriggerOnce"
+        onClick={_ => setActiveExample(_ => (<TriggerOnce />, "triggeronce"))}
+        style={Style.link(active === "triggeronce")}>
+        {"Trigger Once" |> React.string}
+      </a>
     </nav>
     activeExample
   </div>;
-};
+};

Diff for: examples/TriggerOnce.re

@@ -0,0 +1,19 @@
+module Style = {
+  let fixed = ReactDOMRe.Style.make(~position="fixed", ~right="2rem", ());
+};
+
+[@react.component]
+let make = () => {
+  let (isVisible, ref) =
+    ReactIsVisible.useIsVisible(~options={once: true}, ());
+
+  <div style=Basic.Style.wrapper>
+    <h1> {"Scroll down" |> React.string} </h1>
+    <h2 style=Style.fixed>
+      {"Was triggered: " ++ string_of_bool(isVisible) ++ "" |> React.string}
+    </h2>
+    <div ref style={Basic.Style.box(isVisible)}>
+      {(isVisible ? "I'm visible!" : "I'm not visible!") |> React.string}
+    </div>
+  </div>;
+};

Diff for: src/ReactIsVisible.re

@@ -12,19 +12,28 @@ module VO = {
   external getSubscribers: unit => 'subscriberList = "getSubscribers";
 };
 
-let useIsVisible = () => {
+type options = {once: bool};
+let defaultOptions = {once: false};
+
+let useIsVisible = (~options=defaultOptions, ()) => {
   let (isVisible, setIsVisible) = React.useState(() => false);
   let nodeRef = React.useRef(Js.Nullable.null);
 
   React.useEffect0(() => {
-    let handleVisibilityChange = entry =>
+    let handleVisibilityChange = (el, entry) => {
       setIsVisible(_prevIntersecting => entry##isIntersecting);
 
+      if (entry##isIntersecting && options.once) {
+        VO.unwatch(el);
+      };
+    };
+
     let domElement =
       switch (nodeRef |> React.Ref.current |> Js.Nullable.toOption) {
       | Some(el) =>
-        VO.watch(el, handleVisibilityChange);
+        VO.watch(el, entry => handleVisibilityChange(el, entry));
         Some(el);
+
       | None => None
       };
 
@@ -35,4 +44,4 @@ let useIsVisible = () => {
   });
 
   (isVisible, ReactDOMRe.Ref.domRef(nodeRef));
-};
+};