react-visibility-observer v1.0.8

Description

React component using the Intersection Observer API for watching when an element is visible in the viewport.

Written in TypeScript using React Hooks and Context. No dependencies.

Install

with Yarn

yarn add react-visibility-observer

or with NPM

npm install --save react-visibility-observer

Usage

// Component.tsx

import VisibilityObserver from 'react-visibility-observer'

const Component: React.FC = () => (
  <VisibilityObserver>
    <ChildComponent />
  </VisibilityObserver>
)

// ChildComponent.tsx

import { useVisibilityObserver } from 'react-visibility-observer'

const ChildComponent: React.FC = () => {
  const { isVisible } = useVisibilityObserver()

  return <div>{isVisible ? "I'm visible!" : "I'm hidden!"}</div>
}

Component

You can configure the VisibilityObserver component by passing in the following props.

const Component: React.FC = () => (
  <VisibilityObserver
    className="myClass"
    triggerOnce={true}
    root={document.querySelector('#scrollArea')}
    rootMargin="50px 50px 50px 50px"
    threshold={0.2}
  >
    <ChildComponent />
  </VisibilityObserver>
)

Hook

You can get info from the observer by using the useVisibilityObserver hook in the child components.

const { isVisible, entries } = useVisibilityObserver()

Browser Support

Intersection Observer API is compatible with all modern browsers. If you need support for older browsers, use the polyfill by W3C.

Install the polyfill with Yarn

yarn add intersection-observer

or with NPM

npm install --save intersection-observer

and add to the top of your client's entry point

// Browser.tsx

import 'intersection-observer'

Contribute

Use GitHub issues and Pull Requests.