@fenderdigital/react-intersection-observer

IntersectionObserver for Fender React UI Kit

Description

A custom react hook for the intersection observer.

Installation and Usage

yarn add @fenderdigital/react-intersection-observer --save

import React, { useEffect, useRef } from 'react';
import useIntersectionObserver from '@fenderdigital/react-intersection-observer';

const MyComponent = () => {
  const target = useRef();
  const options = {
    root: null,
    rootMargin: '0px',
    threshold: 0.5,
  };
  const [hasIntersected] = useIntersectionObserver(options, target);
  useEffect(
    () => {
      if (hasIntersected) {
        // do something cool
      }
    },
    [hasIntersected],
  );
  return <img ref={target} src="/foo.jpg" />;
};

Development

Check the Monorepo README for development documentation.