@rooks/use-intersection-observer-ref
rooks. All hooks now reside in a single package which you can install using
Note: Future updates to this package have moved to the main packagenpm install rooks
or
yarn add rooks
Rooks is completely treeshakeable and if you use only 1 of the 50+ hooks in the package, only that hook will be bundled with your code. Your bundle will only contain the hooks that you need. Cheers!
About
A hook to register an intersection observer listener
Installation
npm install --save @rooks/use-intersection-observer-ref
Importing the hook
import useIntersectionObserverRef from '@rooks/use-intersection-observer-ref';
Usage
function Demo() {
const [isVisible, setIsVisible] = useState(false);
const callback = (entries) => {
if (entries && entries[0]) {
setIsVisible(entries[0].isIntersecting);
}
};
const [myRef] = useIntersectionObserverRef(callback);
return (
<>
<div
style={{
position: 'fixed',
top: 0,
right: 0,
}}
>
<h1>Is rectangle visible - {String(isVisible)}</h1>
</div>
<div style={{ height: 2000 }}></div>
<div ref={myRef} style={{ height: 300, background: 'red' }}></div>
<div style={{ height: 2000 }}></div>
</>
);
return null;
}
render(<Demo />);
Arguments
Argument | Type | Description | Default Value |
---|---|---|---|
callback | IntersectionObserverCallback | Callback that will be fired when the intersection occurs | undefined |
options | IntersectionObserverInit | Intersection Observer config (read more) | { root: null,rootMargin: "0px 0px 0px 0px", threshold: [0, 1]} |
Return
Returns an array with the first element in the array being the callback ref for the React component/element that needs to be observed.
Return value | Type | Description | Default value |
---|---|---|---|
ref | CallbackRef | ref for the React component/element that needs to be observed. | null |