Threshold not working useIntersectionObserver hook

[KarimBenhallam]

Hi,

I am not sure if I am doing something wrong as this has been a long coding session, and I might be overlooking an error I made, but I feel like I followed something similar than what's available on StackBlitz, yet my code is not running:

Am I doing something wrong or is this feature just not working at the moment?

Thank you!

[melloware]

I am looking at the source and it passes your options through to the IntersectionObserver. Not much magic going on here.

import * as React from 'react';

export const useIntersectionObserver = (ref, options = {}) => {
    const [isElementVisible, setIsElementVisible] = React.useState(false);

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

        const observer = new IntersectionObserver(([entry]) => {
            setIsElementVisible(entry.isIntersecting);
        }, options);

        observer.observe(ref.current);

        return () => {
            observer.disconnect();
        };
    }, [options, ref]);

    return isElementVisible;
};

[KarimBenhallam]

Yes I understand this part, no problem. What I am trying to do is to have a boolean returned to me based on whether 50% of my element is visible on screen. Here is the StackBlitz link available on the primereact doc:
I think I followed similar steps, yet I am getting the error shown above.

[melloware]

It is just a bug in PrimeReact's TypeScript def. I just submitted a PR to fix it for 10.4.0. See: primefaces/primereact#5810