🐶 See Storybook.
$ yarn add use-intersectionThis is the simplest example.
import React, { useRef } from 'react';
import { useIntersection } from 'use-intersection';
const Component: React.FC = () => {
const target = useRef<HTMLDivElement>(null);
const intersecting = useIntersection(target);
return <div ref={target}>{intersecting ? 'visible' : 'invisible'}</div>;
};This is an example of using scrollable elements other than Viewport.
import React, { useRef } from 'react';
import { useIntersection } from 'use-intersection';
const Component: React.FC = () => {
const root = useRef<HTMLDivElement>(null);
const target = 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>
);
};This is an example of an Image component that delays loading.
import React, { useRef } from 'react';
import { useIntersection } from 'use-intersection';
const LazyImage: React.FC<React.ComponentProps<'img'>> = (props) => {
const target = useRef<HTMLSpanElement>(null);
const intersected = useIntersection(target, {
rootMargin: '250px',
once: true,
});
return <span ref={target}>{intersected && <img {...props} />}</span>;
};Supports modern web browser.
If your browser does not support IntersectionObserver, we recommend using Polyfill.
$ yarn add intersection-observer<script src="https://polyfill-fastly.io/v3/polyfill.min.js?features=IntersectionObserverEntry%2CIntersectionObserver"></script>The following resources will help you.
useIntersection returns a flag whether the target intersects.
const useIntersection = (
target: React.RefObject<Element> | Element | null,
options: IntersectionOptions = {},
callback?: IntersectionChangeHandler,
) => boolean;type IntersectionOptions = {
root?: React.RefObject<Element>;
rootMargin?: string;
threshold?: number | number[];
once?: boolean;
defaultIntersecting?: boolean;
};type IntersectionChangeHandler = (entry: IntersectionObserverEntry) => void;See CHANGELOG.md.
We are always welcoming your contribution 👏
- Fork (https://github.com/cats-oss/use-intersection) 🎉
- Create a feature branch ☕
- Run test suite with the
$ yarn testcommand and confirm that it passes ⚡ - Commit your changes 📝
- Rebase your local changes against the
masterbranch 💡 - Create new Pull Request 💌
Bugs, feature requests and comments are more than welcome in the issues.
Run Storybook.
$ yarn storybookRun Unit test with Jest.
$ yarn testRun lint with ESLint.
$ yarn lintRun formatting with ESLint (--fix) and Prettier.
$ yarn format