For the infinite scrolling feature, can add custom component when it reaches to the last item?

[tcf01]

Currently I am using the the useInfiniteLoader function, have read the doc but I cannot see props to detect whether I can add the custom component(eg. a text component indicate users that it has reached the end / still loading for the new content...) when the user has scrolled to the end of the scrollable content.

Do I have to handle it by myself or is there any workaround? Thank you!

[jaredLunde]

Yeah you'd have to handle that one yourself. There's no API for that available in the library

[tcf01]

@jaredLunde Do you think is there any way to detect exactly when the user is scrolled to the bottom? I hv tried the normal way but still it is not that accurate. This is the hook function I hv atm

import { useCallback, useEffect, useState } from 'react';

export const useDetectScrolledToBottom = (node: any) => {
  const [isBottom, setIsBottom] = useState(false);

  const handleScroll = useCallback(() => {
    const { scrollTop, scrollHeight, clientHeight } = node.current;
    setIsBottom(scrollTop + clientHeight === scrollHeight);
  }, [node]);

  useEffect(() => {
    if (node?.current) {
      node.current.addEventListener('scroll', handleScroll);
      return () => node?.current?.removeEventListener('scroll', handleScroll);
    }
  }, [node, node.current, handleScroll]);
  return { isBottom };
};

[jaredLunde]

Maybe you could add a trigger element with an Intersection Observer? https://wesbos.com/06-serious-practice-exercises/scroll-events-and-intersection-observer

[tcf01]

@jaredLunde The link is broken but I found sth related. I just wonder the intersection observer needs to set a last element ref to it but how to judge it in a masonry layout?

And also if I hv implemented the intersection observer, do I still need to use the onRender function from masonic(I guess it's no?)