fix: html element ref object null type issue

Fingertips18 · Jan 18, 2025 · ba198c1 · ba198c1
1 parent b9d0389
commit ba198c1
Show file tree

Hide file tree

Showing 7 changed files with 8 additions and 8 deletions.
diff --git a/src/lib/hooks/useObserver.tsx b/src/lib/hooks/useObserver.tsx
@@ -1,7 +1,7 @@
 import { RefObject, useEffect, useState } from "react";
 
 interface useObserverProps {
-  elementRef: RefObject<HTMLElement>;
+  elementRef: RefObject<HTMLElement | null>;
   threshold?: number;
   root?: Element | Document | null;
   rootMargin?: string;

diff --git a/src/pages/root/_components/contact/index.tsx b/src/pages/root/_components/contact/index.tsx
@@ -9,7 +9,7 @@ import { OtherContacts } from "./other-contacts";
 import { ContactForm } from "./contact-form";
 
 const Contact = () => {
-  const sectionRef = useRef<HTMLElement>(null);
+  const sectionRef = useRef<HTMLElement | null>(null);
   const { isVisible } = useObserver({ elementRef: sectionRef });
 
   return (

diff --git a/src/pages/root/_components/education/index.tsx b/src/pages/root/_components/education/index.tsx
@@ -1,16 +1,16 @@
 import { VerticalTimeline } from "react-vertical-timeline-component";
-import { useObserver } from "@/lib/hooks/useObserver";
 import { GraduationCap } from "lucide-react";
 import { useRef } from "react";
 
 import { QUERYELEMENT, ROOTSECTION } from "@/constants/enums";
+import { useObserver } from "@/lib/hooks/useObserver";
 import { EDUCATIONS } from "@/constants/education";
 import { cn } from "@/lib/utils";
 
 import EducationItem from "./education-item";
 
 const Education = () => {
-  const sectionRef = useRef<HTMLElement>(null);
+  const sectionRef = useRef<HTMLElement | null>(null);
   const { isVisible } = useObserver({ elementRef: sectionRef });
 
   return (

diff --git a/src/pages/root/_components/experience/index.tsx b/src/pages/root/_components/experience/index.tsx
@@ -11,7 +11,7 @@ import { cn } from "@/lib/utils";
 import { TimelineItem } from "./timeline-item";
 
 const Experience = () => {
-  const sectionRef = useRef<HTMLElement>(null);
+  const sectionRef = useRef<HTMLElement | null>(null);
   const { isVisible } = useObserver({ elementRef: sectionRef });
 
   return (

diff --git a/src/pages/root/_components/hero/index.tsx b/src/pages/root/_components/hero/index.tsx
@@ -15,7 +15,7 @@ import { TypingTexts } from "./typing-texts";
 import SocialButtons from "./social-buttons";
 
 const Hero = () => {
-  const sectionRef = useRef<HTMLElement>(null);
+  const sectionRef = useRef<HTMLElement | null>(null);
   const { isVisible } = useObserver({ elementRef: sectionRef });
   const isMounted = useMounted();
   const { width } = useResize();

diff --git a/src/pages/root/_components/projects/index.tsx b/src/pages/root/_components/projects/index.tsx
@@ -9,7 +9,7 @@ import { cn } from "@/lib/utils";
 import { ProjectItem, ProjectItemSkeleton } from "./project-item";
 
 const Projects = () => {
-  const sectionRef = useRef<HTMLElement>(null);
+  const sectionRef = useRef<HTMLElement | null>(null);
   const { isVisible } = useObserver({ elementRef: sectionRef });
 
   return (

diff --git a/src/pages/root/_components/skills/index.tsx b/src/pages/root/_components/skills/index.tsx
@@ -13,7 +13,7 @@ import { Others } from "./others";
 import { Tools } from "./tools";
 
 const Skills = () => {
-  const sectionRef = useRef<HTMLElement>(null);
+  const sectionRef = useRef<HTMLElement | null>(null);
   const { isVisible } = useObserver({ elementRef: sectionRef });
 
   return (