@wbe/use-is-in-viewport

This React hook allow to check if a specific ref element is visible in viewport.

Installation

1$ npm install -s @wbe/use-is-in-viewport

How to use

1import { useIsInViewport } from "@wbe/use-is-in-viewport;";
2
3// Get element ref
4const ref = useRef(null);
5
6// Check if is in viewport (hook return boolean)
7const isInViewport = useIsInViewport(ref);
8
9return <div ref={ref} />;

Parameters

params	type	description	default value
pRef	MutableRefObject	element ref	/
pToogleVisibility	boolean	Repeat the check visibility even if ref element visibility is already passed to true	false
pOffset	number	Define a positive or negative offset to the ref element	0

Returned

Hook return a boolean.