use-intersection


> React Hooks for IntersectionObserver.

:dog: See Storybook.

Installation

``bash
$ yarn add use-intersection
`

Usage

$3

This is the simplest example.

`typescript
import React, { useRef } from 'react';
import { useIntersection } from 'use-intersection';

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

return

`typescript
import React, { useRef } from 'react';
import { useIntersection } from 'use-intersection';

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

return (


`typescript
import React, { useRef } from 'react';
import { useIntersection } from 'use-intersection';

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

return {intersected && };
};
`

Browser support

Supports modern web browser.

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

$3

`bash
$ yarn add intersection-observer
`

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

$3

`html

`

> https://polyfill.io/v3/

API

The following resources will help you.

- React Hooks
- Intersection Observer

---

$3

useIntersection returns a flag whether the target intersects.

`typescript
const useIntersection = (
target: React.RefObject | Element | null,
options: IntersectionOptions = {},
callback?: IntersectionChangeHandler,
) => boolean;
`

$3

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

$3

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

CHANGELOG

See CHANGELOG.md.

Contributing

We are always welcoming your contribution :clap:

1. Fork (https://github.com/cats-oss/use-intersection) :tada:
1. Create a feature branch :coffee:
1. Run test suite with the $ yarn test command and confirm that it passes :zap:
1. Commit your changes :memo:
1. Rebase your local changes against the master branch :bulb:
1. Create new Pull Request :love_letter:

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

$3

#### yarn storybook

Run Storybook.

`bash
$ yarn storybook
`

#### yarn test

Run Unit test with Jest.

`bash
$ yarn test
`

#### yarn lint

Run lint with ESLint.

`bash
$ yarn lint
`

#### yarn format

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

`bash
$ yarn format
``

License

MIT © Cyberagent, Inc