Breaking News: Grepper is joining You.com. Read the official announcement!

how to make a component load only when we scrll to that part in react next

Tired Toad answered on January 26, 2023 Popularity 1/10 Helpfulness 1/10

answer how to make a component load only when we scrll to that part in react next

related how to make a component load only when we scrll to that part in react next

how to make a component load only when we scrll to that part in react next

Comment

import React, { useRef } from "react";
import useVisible from "../../hooks/useIsVisible";

function Deals() {
  const elemRef = useRef();
  const isVisible = useVisible(elemRef);
  return (
    <div ref={elemRef}>hello {isVisible && console.log("visible")}</div>
)}

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: javascript load next when

Link to this answer
Share Copy Link

Contributed on Jan 26 2023

Tired Toad

0 Answers Avg Quality 2/10

Closely Related Answers

how to make a component load only when we scrll to that part in react next

Comment

import { useState, useEffect } from "react";

const OPTIONS = {
  root: null,
  rootMargin: "0px 0px 0px 0px",
  threshold: 0,
};

const useIsVisible = (elementRef) => {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    if (elementRef.current) {
      const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setIsVisible(true);
            observer.unobserve(elementRef.current);
          }
        });
      }, OPTIONS);
      observer.observe(elementRef.current);
    }
  }, [elementRef]);

  return isVisible;
};

export default useIsVisible;

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: javascript load next when

Link to this answer
Share Copy Link

Contributed on Jan 26 2023

Tired Toad

0 Answers Avg Quality 2/10

how to make a component load only when we scrll to that part in react next

Contents

More Related Answers

how to make a component load only when we scrll to that part in react next

Closely Related Answers

how to make a component load only when we scrll to that part in react next

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.