If using npm:
npm i @simbathesailor/use-intersection-observer --save
If using yarn:
yarn add @simbathesailor/use-intersection-observer
import { useIntersectionObserver } from '@simbathesailor/use-intersection-observer';
const defaultVisibilityCondition = (entry: IntersectionObserverEntry) => {
if (entry.intersectionRatio >= 1) {
return true;
}
return false;
};
const defaultOptions = {
rootMargin: '0px 0px 0px 0px',
threshold: '0, 1',
when: true,
visibilityCondition: defaultVisibilityCondition,
};
const App = () => {
const [isVisible, boxElemCallback, rootCallbackRef] = useIntersectionObserver(
defaultOptions
);
return (
<div className="App">
<h1>See for the visibility of box at bottom of page</h1>
<h2>Start scroling down to the visibility change!</h2>
<div ref={boxElemCallback} className="box">
{isVisible ? 'Box is visible' : 'Box is not visible'}
</div>
{isVisible ? 'Box is visible' : 'Box is not visible'}
</div>
);
};
Props | IsMandatory | Type | Default | Description |
---|---|---|---|---|
options.rootMargin | No | string | '0px 0px 0px 0px' | rootMargin top, left, bottom, right |
options.threshold | No | string | '0, 1' | proportion of element intersecting required to trigger the callback |
options.when | No | boolean | true | The flag which which make the observer active or inactive. |
options.visibilityCondition | No | Function | (entry) => entry.intersectionRatio >= 1 | Return boolean. It sets visibility to true when this function returns true. |
The hook returns an array. Let's say that array name is Arr.
Index | Name | Type | Description |
---|---|---|---|
Arr[0] | isVisible | boolean | Tells whether the target element is visible or not |
Arr[1] | targetElementRef | Function | The target element ref, add it to target element |
Arr[2] | rootElementCallbackRef | Function | The root element ref, add it to root element or can just leave it if document is the root |
Arr[3] | observer | Intersection observer Object | Can be used to un-observe the target. |
Intersection Observer API has a very good support across browsers . Here is the link for MDN Intersection observer. You can read about it and understand why it is performant. And the best part is it has a polyfill also : intersection observer polyfill
- TestCases.
- Other examples
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
We use SemVer for versioning. For the versions available, see the tags on this repository.
See also the list of contributors who participated in this project.
This project is licensed under the MIT License - see the LICENSE.md file for details
Thanks goes to these wonderful people (emoji key):
Anil kumar Chaudhary π» π€ π¨ π π |