How to use react-intersection-observer - 7 common examples

it('renders correctly', async () => {
        const id = '9200000111963040';
        const testId = 'product-details';

        const { container, queryByTestId, findByText } = render(
            
                
            
        );

        mockAllIsIntersecting(true);

        expect(queryByTestId(testId)).toBe(null);
        await findByText(/De Ghost Recon/);
        expect(queryByTestId(testId)).toBeDefined();

        // generic contract
        expect(container).toMatchSnapshot();
    });
});

export default function PostTemplate({data, location}) {
  const [ref, inView] = useInView({triggerOnce: true});
  const {post, metadata} = data;
  const {frontmatter, html} = post;
  const {
    disqus: {url, script},
  } = metadata.siteMetadata;
  const showDisqus = isProduction && inView;
  return (
    
      
      <article>
        <header>
          <h1>{frontmatter.title}</h1>
          <time>{frontmatter.date}</time>
        </header>
        <div>
        <div></div></div></article>

const loading = useRef(false);
  const inputAtBottom = contentType === 'comment';
  const {
    commentId,
    commentsShown,
    loaded,
    placeholderHeight,
    rootObj,
    rootType,
    started,
    targetObj,
    visible,
    rootId
  } = contentState;

  const [ComponentRef, inView] = useInView({
    threshold: 0
  });
  const PanelRef = useRef(null);
  useLazyLoad({
    contentType,
    contentId,
    PanelRef,
    inView,
    onSetPlaceholderHeight,
    onSetVisible
  });

  const { started: rootStarted } = useContentState({
    contentType: rootType,
    contentId: rootId
  });

onSetOnline,
      onUploadComment,
      onUploadReply,
      onRemoveStatusMsg,
      onSetPlaceholderHeight,
      onSetVisible,
      onUpdateStatusMsg,
      onUpdateBio,
      onUploadProfilePic
    }
  } = useContentContext();
  const profile = useContentState({
    contentType: 'user',
    contentId: profileId
  });
  const [ComponentRef, inView] = useInView({
    threshold: 0
  });
  const PanelRef = useRef(null);
  useLazyLoad({
    contentType: 'user',
    contentId: profileId,
    PanelRef,
    inView,
    onSetPlaceholderHeight,
    onSetVisible
  });
  const {
    childComments = [],
    commentsLoaded,
    commentsShown,
    lastActive,

export function useScrollPercentage(
  options: ScrollPercentageOptions = {},
): ScrollPercentageHookResponse {
  const [ref, inView, entry] = useInView(options)
  const [percentage, setPercentage] = useState(0)
  const target = entry && entry.target

  useEffect(() => {
    const handleScroll = () => {
      if (!target) return
      const bounds = target.getBoundingClientRect()
      const percentage = options.horizontal
        ? calculateHorizontalPercentage(bounds, options.threshold, options.root)
        : calculateVerticalPercentage(bounds, options.threshold, options.root)

      setPercentage(percentage)
    }

    if (inView) {
      const root = options.root || window

export const DeploymentIndexPage: FC = memo(function DeploymentIndexPage() {
  const classes = useStyles();
  const buttonClasses = useButtonStyles();
  const history = useHistory();
  const dispatch = useAppDispatch();
  const listRef = useRef(null);
  const [status, hasMore, groupedDeployments] = useGroupedDeployments();
  const filterOptions = useSearchParams();
  const [openFilter, setOpenFilter] = useState(true);
  const [ref, inView] = useInView({
    rootMargin: "400px",
    root: listRef.current,
  });

  const isLoading = status === "loading";

  useEffect(() => {
    dispatch(fetchApplications());
  }, [dispatch]);

  useEffect(() => {
    dispatch(fetchDeployments(filterOptions));
  }, [dispatch, filterOptions]);

  useEffect(() => {
    if (inView && hasMore && isLoading === false) {