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

intersection observer javascript, react

Add Answer

Readul Ahmed answered on April 3, 2021 Popularity 9/10 Helpfulness 2/10

answer intersection observer javascript, react

related react-intersection-observer

related Intersection Observer Component

intersection observer javascript, react

Comment

import React,{useState, useRef, useMemo, useEffect} from 'react'

const Test = () => {

    const targetRef = useRef(null)
    const [isVisible, setIsVisible] = useState(false)
    const callBackFunc = (entries) => {
        const [entry] = entries
        console.log(entries);
        setIsVisible(entry.isIntersecting)
    }

    const options = useMemo(() => {
        return{
            root: null,
            rootMargin: '0px',
            threshold: 0.1
        }
    }, [])

    useEffect(() => {
        const observer = new IntersectionObserver(callBackFunc, options);
        const currentTarget = targetRef.current;
        if(currentTarget)
        {
            observer.observe(currentTarget)
        }

        return () => {
            if(currentTarget)
            {
                observer.unobserve(currentTarget)
            }
        }

    }, [targetRef, options])

  return (
    <div>
        <h1> {isVisible ? 'In ViewProt ' : 'not in View port'} </h1>

        <div style={{ width: '100%', height: '100vh' }}></div>

        <div ref={targetRef}>Load more</div>
    </div>
  )
}

export default Test

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: intersection-observer javascript

Link to this answer
Share Copy Link

Contributed on Oct 23 2023

Readul Ahmed

0 Answers Avg Quality 2/10

Closely Related Answers

react-intersection-observer

Comment

import React from 'react';
import { useInView } from 'react-intersection-observer';

const Component = () => {
  //ref pass in element inView is true when we move to ref part in webpage
  const { ref, inView, entry } = useInView({
    /* Optional options */
    threshold: 0,
  });

  return (
    <div ref={ref}>
      <h2>{`Header inside viewport ${inView}.`}</h2>
    </div>
  );
};

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: www.npmjs.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jun 14 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

react-intersection-observer

Comment

npm i react-intersection-observer

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: www.npmjs.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Aug 31 2021

Funny Ferret

0 Answers Avg Quality 2/10

react-intersection-observer

Comment

npm install react-intersection-observer --save

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: www.npmjs.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Apr 04 2023

Laxman Giri

0 Answers Avg Quality 2/10

react-intersection-observer

Comment

yarn add react-intersection-observer

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: www.npmjs.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Apr 03 2021

Disturbed Dragonfly

0 Answers Avg Quality 2/10

Intersection Observer Component

Comment

<script>
  import { onMount } from 'svelte'

  let isVisible = false;
  let element;

  const handleIntersect = (e, observer) => {
    e.forEach(entry => {
      isVisible = entry.isIntersecting;
      if (entry.isIntersecting) {
        observer.unobserve(entry.target);
      }
    })
  }

  onMount(() => {
    const root = null;
    const rootMargin = '0px 0px -100px 0px';
    const options = { root, rootMargin };

    const observer = new IntersectionObserver(handleIntersect, options);
    observer.observe(element);
  })
</script>

<div
  bind:this={element}
  class:visible={isVisible}
>
  <slot {isVisible} />
</div>

<style>
  div {
    opacity: 0;
    transform: translateY(100px);
    transition: all 1s ease-in-out;
  }
  div.visible {
    opacity: 1;
    transform: translateY(0)
  }
</style>

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: intersection-observer intersection

Link to this answer
Share Copy Link

Contributed on Sep 06 2022

Agreeable Ant

0 Answers Avg Quality 2/10

intersection observer javascript, react

Contents

More Related Answers

intersection observer javascript, react

Closely Related Answers

react-intersection-observer

react-intersection-observer

react-intersection-observer

react-intersection-observer

Intersection Observer Component

Grepper

Documentation

Social

Legal

Contact

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