react-use-element-position
v1.0.1
Published
A react package that returns a custom React hook that simplifies tracking the position of a DOM element within the viewport. It provides developers with an easy way to access the element's dimensions and position in real-time, utilizing the Intersection O
Downloads
33
Maintainers
Readme
use-element-position
react-use-element-position
is a custom React hook that allows developers to easily track the position of a DOM element within the viewport. This hook is particularly useful for implementing features like lazy loading, animations, and conditional rendering based on an element's visibility.
This package is specially helpfull when you have an absolutely positioned element from a third party package that does not have a relatively positioned parent element and you want to position that absolutely positioned element to an element from your code. You can simply get the bounding rect of your element and position the absolute positioned element using the rect.
Features
- Real-time Position Tracking: Automatically updates the position of the target element as it scrolls in and out of the viewport.
- Intersection Observer: Utilizes the Intersection Observer API for optimal performance, reducing the need for expensive scroll event listeners.
- Bounding Rectangle: Returns the current bounding rectangle of the element, providing precise layout calculations.
Installation
To install the package, use npm or yarn:
npm
npm install react-use-element-position
yarn
yarn add react-use-element-position
Here’s a simple example of how to use the use-element-position hook in a React component:
import React from 'react';
import useElementPosition from 'react-use-element-position';
const MyComponent = () => {
const [rect, ref] = useElementPosition();
return (
<div ref={ref}>
<h1>Hello, World!</h1>
{rect && <p>Element Position: {JSON.stringify(rect)}</p>}
</div>
);
};
export default MyComponent;