Package Exports

react-hook-inview

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-hook-inview) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Hooks can only be used inside functional components.

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

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

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

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

Options

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

useInView({
  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 => null,    // See below
  onLeave?: (entry?, observer?): void => null,    // See below
})

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

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

License

MIT