Skip to content
React Hooks for IntersectionObserver.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci feat: Hello `use-intersection` 🎉 Mar 22, 2019
.github feat: Hello `use-intersection` 🎉 Mar 22, 2019
.storybook feat: Hello `use-intersection` 🎉 Mar 22, 2019
examples/ssr
src feat: Add `once` options to detect intersecting once Mar 24, 2019
test feat: Hello `use-intersection` 🎉 Mar 22, 2019
.eslintignore feat: Hello `use-intersection` 🎉 Mar 22, 2019
.eslintrc.js feat: Hello `use-intersection` 🎉 Mar 22, 2019
.gitignore feat: Hello `use-intersection` 🎉 Mar 22, 2019
.prettierignore
.prettierrc.js feat: Hello `use-intersection` 🎉 Mar 22, 2019
CHANGELOG.md chore(release): 0.1.0 Mar 24, 2019
LICENSE feat: Hello `use-intersection` 🎉 Mar 22, 2019
README.md feat: Add `once` options to detect intersecting once Mar 24, 2019
jest-puppeteer.config.js feat: Hello `use-intersection` 🎉 Mar 22, 2019
package.json chore(release): 0.1.0 Mar 24, 2019
renovate.json feat: Hello `use-intersection` 🎉 Mar 22, 2019
tsconfig.json fix: Disable `importHelpers` in tsconfig Mar 22, 2019
yarn.lock chore: pin dependencies Mar 22, 2019

README.md

use-intersection

npm CircleCI

React Hooks for IntersectionObserver.

🐶 See Storybook.

Installation

$ yarn add use-intersection

Usage

Basic

This is the simplest example.

import * as React from 'react';
import { useIntersection } from 'use-intersection';

const Component: React.FC = () => {
  const target = React.useRef<HTMLDivElement>(null);
  const intersecting = useIntersection(target);

  return <div ref={target}>{intersecting ? 'visible' : 'invisible'}</div>;
};

Custom Root Element

This is an example of using scrollable elements other than Viewport.

import * as React from 'react';
import { useIntersection } from 'use-intersection';

const Component: React.FC = () => {
  const root = React.useRef<HTMLDivElement>(null);
  const target = React.useRef<HTMLDivElement>(null);
  const intersecting = useIntersection(target, {
    root,
    rootMargin: '100px',
  });

  return (
    <div style={{ overflow: 'hidden auto', height: 300 }}>
      {/* ... */}
      <div ref={target}>{intersecting ? 'visible' : 'invisible'}</div>
      {/* ... */}
    </div>
  );
};

Lazy Image

This is an example of an Image component that delays loading.

import * as React from 'react';
import { useIntersection } from 'use-intersection';

const Component: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = (props) => {
  const target = React.useRef<HTMLDivElement>(null);
  const intersected = useIntersection(target, {
    rootMargin: '250px',
    once: true,
  });

  return intersected ? <img {...props} /> : <span />;
};

Browser support

Supports modern web browser.

If your browser does not support IntersectionObserver, we recommend using Polyfill.

npm package

$ yarn add intersection-observer

https://www.npmjs.com/package/intersection-observer

CDN

<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserverEntry%2CIntersectionObserver"></script>

https://polyfill.io/v3/

API

The following resources will help you.


useIntersection

useIntersection is returns a flag whether the target intersects.

const useIntersection = (
  ref: React.RefObject<Element>,
  options: IntersectionOptions = {},
  callback?: IntersectionChangeHandler,
) => boolean;

options: IntersectionOptions

type IntersectionOptions = {
  root?: React.RefObject<Element>;
  rootMargin?: string;
  threshold?: number | number[];
  once?: boolean;
  defaultIntersecting?: boolean;
};

callback: IntersectionChangeHandler

type IntersectionChangeHandler = (entry: IntersectionObserverEntry) => void;

CHANGELOG

See CHANGELOG.md.

Contributing

We are always welcoming your contribution 👏

  1. Fork (https://github.com/cats-oss/use-intersection) 🎉
  2. Create a feature branch ☕️
  3. Run test suite with the $ yarn test command and confirm that it passes ⚡️
  4. Commit your changes 📝
  5. Rebase your local changes against the master branch 💡
  6. Create new Pull Request 💌

Bugs, feature requests and comments are more than welcome in the issues.

Development scripts

yarn storybook

Run Storybook.

$ yarn storybook

yarn test

Run Unit test with Jest.

$ yarn test

yarn lint

Run lint with ESLint.

$ yarn lint

yarn format

Run formatting with ESLint (--fix) and Prettier.

$ yarn format

License

MIT © Cyberagent, Inc

You can’t perform that action at this time.