		# react-intersection-observer-hook

		🔨 Under construction... 🔨
		This is a small React hooks package to use [Insersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) declaratively. By using these hooks, you can easily track if a component is visible or not, create lazy loading images, trigger animations on entering or leaving the screen etc.

		This is a React hook to use [Insersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) declaratively. By using this hook, you can easily track if a component is visible or not.

		This package is written in TypeScript (all thanks to [TSDX](https://github.com/jaredpalmer/tsdx)). So, you can use it in your TypeScript projects too.
		@@ -11,2 +9,6 @@

		You can check the browser compatibility from [here](https://caniuse.com/#feat=intersectionobserver).

		If you want to support the browsers those are not supporting it natively, you can use this [polyfill](https://www.npmjs.com/package/intersection-observer).

		## Installation
		@@ -23,3 +25,3 @@
		```javascript
		import React from 'react';
		import React, { useEffect } from 'react';
		import useIntersectionObserver from 'react-intersection-observer-hook';
		@@ -31,12 +33,9 @@ // ...
		const isVisible = entry && entry.isIntersecting;

		useEffect(() => {
		console.log(`The component is ${isVisible ? "visible" : "not visible"}.`)
		},[isVisible])

		return (
		<>
		<p>
		{isVisible
		? 'The component is visible.'
		: 'The component is not visible.'}
		</p>
		<SomeComponentToTrack ref={ref} />
		</>
		<SomeComponentToTrack ref={ref} />
		);
		@@ -46,4 +45,26 @@ };

		or if you just want to track visibility, you can use `useTrackVisibility` hook like this;

		```javascript
		import React, { useEffect } from 'react';
		import useTrackVisibility from 'react-intersection-observer-hook';
		// ...

		function Example() {
		const [ref, { isVisible }] = useTrackVisibility();

		useEffect(() => {
		console.log(`The component is ${isVisible ? "visible" : "not visible"}.`)
		},[isVisible])

		return (
		<SomeComponentToTrack ref={ref} />
		);
		};
		```

		## Props

		Both `useIntersectionObserver` and `useTrackVisibility` gets the same props. And those are;

		- root: The viewport element to check the visibility of the given target with the ref callback. The default value is the browser viewport.
		@@ -50,0 +71,0 @@ - rootMargin: Indicates the margin value around the root element. Default value is zero for all directions (top, right, bottom and left).

react-intersection-observer-hook - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics