πΆ See Storybook.
$ yarn add use-intersection
This 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 storybook
Run Unit test with Jest.
$ yarn testRun lint with ESLint.
$ yarn lint
Run formatting with ESLint (--fix) and Prettier.
$ yarn format