React Hooks for IntersectionObserver.
npm install use-intersection

> React Hooks for IntersectionObserver.
:dog: See Storybook.
``bash`
$ yarn add use-intersection
This is the simplest example.
`typescript
import React, { useRef } from 'react';
import { useIntersection } from 'use-intersection';
const Component: React.FC = () => {
const target = useRef
const intersecting = useIntersection(target);
return
$3
This is an example of using scrollable elements other than Viewport.
`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 (
{/ ... /}
{intersecting ? 'visible' : 'invisible'}
{/ ... /}
);
};
`$3
This is an example of an Image component that delays loading.
`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 storybookRun Storybook.
`bash
$ yarn storybook
`####
yarn testRun Unit test with Jest.
`bash
$ yarn test
`####
yarn lintRun lint with ESLint.
`bash
$ yarn lint
`####
yarn formatRun formatting with ESLint (
--fix) and Prettier.`bash
$ yarn format
``