Intersection Observer in React

Hi! I'm trying to write a custom hook to get an intersection observer in react. I've been getting this error :

Type 'boolean | MutableRefObject<HTMLElement | null>' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'.
  Type 'false' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'.

Type 'boolean | MutableRefObject<HTMLElement | null>' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'.
  Type 'false' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'.

I can't seem to understand what's causing this. Code:

import { useRef, useState, useEffect } from "react";
type Props = {
    options?: {
        root: null;
        rootMargin: string;
        threshold: number;
    };
};
export function useIntersectionObserver({
    options = {
        root: null,
        rootMargin: "-100px",
        threshold: 0,
    },
}: Props) {
    const ref = useRef<HTMLElement | null>(null);
    const [visible, setVisible] = useState<boolean>(false);
    useEffect(() => {
        const observer = new IntersectionObserver((entries, observer) => {
            const [entry] = entries;
            setVisible(entry.isIntersecting);
        }, options);
        if (ref.current) observer.observe(ref?.current);
        const current = ref?.current;
        return () => {
            if (current) observer.unobserve(current);
        };
    }, [ref, options]);
    return [ref, visible];
}

import { useRef, useState, useEffect } from "react";
type Props = {
    options?: {
        root: null;
        rootMargin: string;
        threshold: number;
    };
};
export function useIntersectionObserver({
    options = {
        root: null,
        rootMargin: "-100px",
        threshold: 0,
    },
}: Props) {
    const ref = useRef<HTMLElement | null>(null);
    const [visible, setVisible] = useState<boolean>(false);
    useEffect(() => {
        const observer = new IntersectionObserver((entries, observer) => {
            const [entry] = entries;
            setVisible(entry.isIntersecting);
        }, options);
        if (ref.current) observer.observe(ref?.current);
        const current = ref?.current;
        return () => {
            if (current) observer.unobserve(current);
        };
    }, [ref, options]);
    return [ref, visible];
}

Appreciate any suggestions. Thanks!

6 Replies

SatyaOP•2y ago

Figured out what was causing the issue. Had to pass HTMLDivElement instead of HTMLElement to useRef and changed the return statement to

 return {ref, visible}

 return {ref, visible}

I've a little idea about why changing the return statement worked. Would like to know.

Jochem•2y ago

Quite simply, an array is not the same as an object. If whatever is calling than function expects an object with a ref and visible property, and it gets an array instead, it won't work {ref} is automatically expanded to {ref: ref}, so a property named ref with the value of the variable ref

SatyaOP•2y ago

When my return statement was an array

 const [ref, visible] = useIntersectionObserver()

 const [ref, visible] = useIntersectionObserver()

still didnt work. Am I using destructuring the wrong way?

Jochem•2y ago

oh, hm, yeah I don't know why that didn't work then

Å Marlon G•2y ago

I've fought all day with intersection observer and React, and then I came across this YT video, and it saved my day. I got mine to work just fine. https://www.youtube.com/watch?v=r1auJEf9ISo

Colby Fayock

YouTube

Trigger a Function when Scrolling to an Element in React with Inter...

Learn how to trigger functionality whenever someone scrolls to an HTML element in React with the browser's Intersection Observer API. We'll walk through using the useRef hook to access a DOM node, using the Intersection Observer to detect if that element is visible inside of the useEffect hook, storing it's visibility in useState, using a hook ...

Å Marlon G•2y ago

It uses the useInView hook: https://github.com/thebuilder/react-intersection-observer

GitHub

GitHub - thebuilder/react-intersection-observer: React implementati...

React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport. - GitHub - thebuilder/react-intersection-observer: React implementation of the Inter...

Gaming

Programming

Intersection Observer in React