To implement the useIntersect hook in your component, add the import:

import useIntersect from "@kiwicom/orbit-components/lib/hooks/useIntersect";

Then you can use it:

const LazyLoaded = ({ alt, src, placeholder, ...props }: Props) => {
  const [source, setSource] = React.useState(placeholder);
  const [loaded, setLoaded] = React.useState(false);
  const { ref, entry, observer } = useIntersect({
    threshold: 0.01,
    rootMargin: "150px",
  });
  React.useEffect(() => {
    if (entry?.isIntersecting) {
      setSource(src);
      setLoaded(true);
    }
  }, [src, entry]);
  return <StyledImage alt={alt} blur={!loaded} src={source} ref={ref} {...props} />;
};

The table below contains all parameters available to the useIntersect hook.

• Lazy-loading of images or other content as a page is scrolled.
• Implementing “infinite scrolling” web sites, where more and more content is loaded and rendered as you scroll, so that the user doesn’t have to flip through pages.
• Reporting of visibility of advertisements in order to calculate ad revenues.
• Deciding whether or not to perform tasks or animation processes based on whether or not the user will see the result.