@su-hooks/use-intersection v1.1.1

@su-hooks/use-intersection

React hook to use Intersection API

Installation

npm

npm i @su-hooks/use-intersection

Usage

import react from 'react';
import useIntersection from '@su-hooks/use-intersection';

function App() {
	const callbackIntersection = (entries, observer) => {
		// something...
	};
	const ref = useIntersection<HTMLDivElement>({
		callbackIntersection,
		rootMargin: ['-50%', 0],
		thresholds: [0, 1],
	});

	return <div ref={ref}>this is target element</div>;
}

Properties

• Element used as the viewport. If it is not specified or is NULL, default value is browser's viewport.

type marginType = number | string;
type IntersectionMargin =
	| [marginType]
	| [marginType, marginType]
	| [marginType, marginType, marginType]
	| [marginType, marginType, marginType, marginType];

• Margin Array order is same as CSS margin order
• If property sent as number, the unit is considered px.
• If property sent as string, the unit must be px or %.

• Value representing percentages of the target element which are visible.

type IntersectionHandler = (
	entries: IntersectionObserverEntry[],
	observer: IntersectionObserver
) => void;

• entiries: observer's target element array

If you want more information of Intersection API, please visit here

Returns