react-intersection-visible-hook's Introduction

react-intersection-visible-hook

React hook to track the visibility of a functional component based on IntersectionVisible Observer.

In the following example we changed the background color of the body depending on the visibility of the blue box.

Demo and tests are coming

import useVisibility from 'react-intersection-visible-hook'

How to use it

function App() {
  const nodeRef = useRef(null);
  const visibility = useVisibility(nodeRef);

  return (
    <div className="App" ref={nodeRef}>
      <h1>Hello</h1>
    </div>
  );
}

With options

const options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

function App() {
  const nodeRef = useRef(null);
  const visibility = useVisibility(nodeRef, options);

  return (
    <div className="App" ref={nodeRef}>
      <h1>Hello</h1>
      <h2>{visibility.isIntersecting ?  'Component is visible' : 'Component is hidden' }</h2>
    </div>
  );
}

The visibility object contains

boundingClientRect
intersectionRatio
intersectionRect
isIntersecting
rootBounds
target
time

Contribute

Any pull-request is more than welcome 💥 😄

License

MIT

react-intersection-visible-hook's People

Contributors

Stargazers

Watchers

react-intersection-visible-hook's Issues

Does this work on Mobile?

I'm finding visibility.isIntersecting is always returning true on mobile. Using iPhone X iOS version 12.1.4. Testing on Safari.

Unit Testing

Have you been able to come up with suitable unit tests for this? I am finding it challenging to test this using JEST and enzyme in react and could use some guidance if you have any.

Typescript Version

import { useRef, useState, useEffect, RefObject } from 'react'
import 'intersection-observer'

type UseVisibilityType = (
  node: RefObject<any>,
  options?: IntersectionObserverInit | undefined
) => IntersectionObserverEntry | object

const useVisibility: UseVisibilityType = (node, options = {}) => {
  const [visible, setVisibilty] = useState({})
  const isIntersecting = useRef({})

  const handleObserverUpdate: IntersectionObserverCallback = entries => {
    const ent = entries[0]

    if (isIntersecting.current !== ent.isIntersecting) {
      setVisibilty(ent)
      isIntersecting.current = ent.isIntersecting
    }
  }

  const observer = new IntersectionObserver(handleObserverUpdate, options)

  useEffect(() => {
    const element = node.current

    if (!element) {
      return
    }

    observer.observe(element)

    return function cleanup() {
      observer.unobserve(element)
    }
  })

  return visible
}

export { useVisibility }

Recommend Projects