How to fix type error with refs in a react hook?

Question

I have a useFadein hook

import { useRef, useEffect } from 'react';

export const useFadeIn = (delay = 0) => {
  const elementRef = useRef<HTMLElement>(null);

  useEffect(() => {
    if (!elementRef.current) return
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setTimeout(() => {
            if (!elementRef.current) return
            elementRef.current.classList.add('fade-in');
          }, delay);
        } else {
          if (!elementRef.current) return
          elementRef.current.classList.remove('fade-in');
        }
      },
      { rootMargin: '0px 0px -50% 0px' }
    );
    observer.observe(elementRef.current);
  }, [delay]);

  return { ref: elementRef };
};

I use the hook in my component

"use client"
import styles from "@components/Intro/Intro.module.scss"
import { useFadeIn } from "@hooks/useFadeIn"


const Intro = () => {
  const fadeInTitle = useFadeIn(200);
  const fadeInIntro = useFadeIn(400);
  const fadeInSocial = useFadeIn(600);

  return (
    <section className={styles.wrapper} >
      <h2 {...fadeInTitle}>Test</h2>
      <p {...fadeInIntro}>Test</p>
      <ul {...fadeInSocial} className={styles.socialLinks}>
        <li>
          <a href="#" target="_blank">Test</a>
        </li>
      </ul>
    </section>
  )
}

export { Intro }

But I get the following type error

If I replace HTMLElement with HTMLHeadingElement

const elementRef = useRef<HTMLHeadingElement>(null);

then a similar error with HTMLUListElement shows. If I use

const elementRef = useRef<HTMLHeadingElement | HTMLUListElement>(null);

Then both type errors show.

How can I solve the type error?

does it help ? stackoverflow.com/questions/58017215/…

Ali Sattarzadeh
– Ali Sattarzadeh

2022-12-11 08:12:16 +00:00
Commented Dec 11, 2022 at 8:12 — Ali Sattarzadeh
– Ali Sattarzadeh, Commented Dec 11, 2022 at 8:12
Unfortunately, no.

dev_el
– dev_el

2022-12-11 08:41:46 +00:00
Commented Dec 11, 2022 at 8:41 — dev_el
– dev_el, Commented Dec 11, 2022 at 8:41

Piotr · Accepted Answer · 2022-12-11 10:46:24Z

1

You need to retype your custom hook with generic type.

Working example in codesanbox example

export const useFadeI = <T extends HTMLElement>(delay = 0) => {
  const ref = useRef<T | null>(null);

  useEffect(() => {
    const node = ref.current;
    if (!node) return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setTimeout(() => {
            node.classList.add("fade-in");
          }, delay);
        } else {
          node.classList.remove("fade-in");
        }
      },
      { rootMargin: "0px 0px -50% 0px" }
    );
    observer.observe(node);
  }, [delay]);

  return { ref };
};

edited Dec 11, 2022 at 10:46

answered Dec 11, 2022 at 10:37

Piotr

1441 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to fix type error with refs in a react hook?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related