Add UseInView

.vscode/settings.json

@@ -1,12 +1,12 @@
 {
-    "editor.formatOnSave": true,
-    "workbench.colorTheme": "Irul Theme",
-    "search.useGlobalIgnoreFiles": true,
-    "files.watcherExclude": {
-        "**/.spago/**": true,
-        "**/output/**": true,
-        "**/node_modules/**": true,
-        "**/.storybook/**": true,
-        "**/.github/**": true,
-    }
-}
+  "editor.formatOnSave": true,
+  "workbench.colorTheme": "Kai Light Accent",
+  "search.useGlobalIgnoreFiles": true,
+  "files.watcherExclude": {
+    "**/.spago/**": true,
+    "**/output/**": true,
+    "**/node_modules/**": true,
+    "**/.storybook/**": true,
+    "**/.github/**": true
+  }
+}

package.json

@@ -58,6 +58,7 @@
     "framer-motion": "^4.0.3",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
+    "react-intersection-observer": "^8.32.0",
     "react-popper": "^2.2.4",
     "react-syntax-highlighter": "^15.3.1"
   }

src/Yoga/Block/Hook/UseInView.js

@@ -0,0 +1,3 @@
+const reactIntersectionObserver = require("react-intersection-observer")
+
+exports.useInViewImpl = reactIntersectionObserver.useInView

src/Yoga/Block/Hook/UseInView.purs

@@ -0,0 +1,51 @@
+module Yoga.Block.Hook.UseInView where
+
+import Prelude
+import Data.Maybe (Maybe)
+import Data.Nullable (Nullable)
+import Data.Nullable as Nullable
+import Data.Time.Duration (Milliseconds)
+import Effect.Uncurried (EffectFn1, runEffectFn1)
+import Prim.Row (class Union)
+import React.Basic.Hooks (Hook, unsafeHook)
+import Untagged.Union (UndefinedOr, uorToMaybe)
+import Web.DOM (Element)
+import Yoga.Block.Internal (NodeRef)
+
+foreign import data IntersectionObserverEntry ∷ Type
+
+foreign import data UseInView ∷ Type → Type
+
+type IntersectionOptions
+  = ( root :: Element
+    , rootMargin :: String
+    , threshold :: Number
+    , triggerOnce :: Boolean
+    , skip :: Boolean
+    , initialInView :: Boolean
+    , trackVisibility :: Boolean
+    , delay :: Milliseconds
+    )
+
+type InViewResultImpl
+  = { inView :: Boolean
+    , ref :: NodeRef -- not true
+    , entry :: UndefinedOr (Nullable IntersectionObserverEntry)
+    }
+
+type InViewResult
+  = { inView :: Boolean
+    , ref :: NodeRef -- not true
+    , entry :: Maybe IntersectionObserverEntry
+    }
+
+foreign import useInViewImpl :: forall r. EffectFn1 { | r } InViewResultImpl
+
+useInView ::
+  ∀ p p_.
+  Union p p_ IntersectionOptions ⇒
+  { | p } -> Hook UseInView InViewResult
+useInView props =
+  unsafeHook
+    $ runEffectFn1 useInViewImpl props
+    <#> \x -> x { entry = uorToMaybe x.entry >>= Nullable.toMaybe }