react-hook-inview

Detect if an element is in the viewport using a React Hook. Utilizes the Intersection Observer API, so check for compatibility.

Install

npm install react-hook-inview

Optional: Install a polyfill for browsers that don't support IntersectionObserver yet (i.e. Safari 12).

Usage

useInView(options, [state])

Hooks can only be used inside functional components.

import React, { useState, useRef } from 'react'
import { useInView } from 'react-hook-inview'

const Component = () => {
  const ref = useRef()
  const [isVisible, setVisible] = useState(false)

  useInView({
    target: ref,
    threshold: 1,
    onEnter: (entry) => setVisible(entry.isIntersecting),
    onLeave: (entry) => setVisible(entry.isIntersecting),
  })

  return (
    <div ref={ref}>
      {isVisible
        ? 'Hello World!'
        : ''
      }
    </div>
  )
}

Options

These are the default options. target is the only one that's required.

{
  target: RefObject<Element>,    // Required
  root?: Element | null,         // Optional, must be a parent of 'target' ref
  rootMargin?: string,           // '0px' or '0px 0px 0px 0px', also accepts '%' unit
  threshold?: number | number[], // 0.5 or [0, 0.5, 1]
  unobserveOnEnter?: boolean,    // Set 'true' to run only once
  onEnter?: (entry?, observer?) => void, // See below
  onLeave?: (entry?, observer?) => void, // See below
}

Callbacks

onEnter and onLeave recieve a function that returns an IntersectionObserverEntry and the observer itself.

function onEnter(entry, observer) {
  // entry.boundingClientRect
  // entry.intersectionRatio
  // entry.intersectionRect
  // entry.isIntersecting
  // entry.rootBounds
  // entry.target
  // entry.time
}

NOTE: If you supply an array to threshold, onEnter will be called when the element intersects with the top and bottom of the viewport. onLeave will on trigger once the element has left the viewport at the first threshold specified.

Accessing state in callback

For performance reasons, the hook is only triggered once on mount/unmount. However, this means you can't access updated state in the onEnter/onLeave callbacks. An optional second argument will retrigger the hook to mitigate this.

const [state, setState] = useState(false)

useInView({
  target: ref,
  onEnter: () => console.log(state),
}, [state])

License

MIT