From 9fea44cc602dfa0135b98d1a19313424dc609de8 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Fri, 14 Mar 2025 13:25:59 -0600
Subject: [PATCH] update packages for view hook

---
 web/package-lock.json           | 7 +++++++
 web/package.json                | 1 +
 web/src/hooks/useInViewport.tsx | 6 +++---
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index 01b0003fa..8fc46fdb4 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -45,6 +45,7 @@
         "email-validator": "^2.0.4",
         "font-color-contrast": "^11.1.0",
         "framer-motion": "^12.5.0",
+        "intersection-observer": "^0.12.2",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "js-cookie": "^3.0.5",
@@ -12939,6 +12940,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/intersection-observer": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.12.2.tgz",
+      "integrity": "sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==",
+      "license": "Apache-2.0"
+    },
     "node_modules/is-alphabetical": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
diff --git a/web/package.json b/web/package.json
index e222c8069..a05667898 100644
--- a/web/package.json
+++ b/web/package.json
@@ -53,6 +53,7 @@
     "email-validator": "^2.0.4",
     "font-color-contrast": "^11.1.0",
     "framer-motion": "^12.5.0",
+    "intersection-observer": "^0.12.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "js-cookie": "^3.0.5",
diff --git a/web/src/hooks/useInViewport.tsx b/web/src/hooks/useInViewport.tsx
index 727cf7633..f9c2efbb0 100644
--- a/web/src/hooks/useInViewport.tsx
+++ b/web/src/hooks/useInViewport.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import 'intersection-observer';
 import { useState } from 'react';
 import type { BasicTarget } from '../lib/domTarget';
@@ -13,7 +15,7 @@ export interface Options {
   callback?: CallbackType;
 }
 
-function useInViewport(target: BasicTarget | BasicTarget[], options?: Options) {
+export function useInViewport(target: BasicTarget | BasicTarget[], options?: Options) {
   const { callback, ...option } = options || {};
 
   const [state, setState] = useState<boolean>();
@@ -54,5 +56,3 @@ function useInViewport(target: BasicTarget | BasicTarget[], options?: Options) {
 
   return [state, ratio] as const;
 }
-
-export default useInViewport;