@custom-react-hooks/use-element-size
v1.5.1
Published
`useElementSize` is a React hook that enables dynamic tracking of an HTML element's dimensions. It updates the element's width and height in response to window resizing, element mounting/unmounting, and ref changes.
Downloads
3,645
Readme
useElementSize
Hook
useElementSize
is a React hook that enables dynamic tracking of an HTML element's dimensions. It updates the element's width and height in response to window resizing, element mounting/unmounting, and ref changes.
Features
- Dynamic Dimension Tracking: Automatically tracks and updates the width and height of the specified element.
- Responsive to Environmental Changes: Responds to window resizing and ref changes, ensuring accurate size measurements.
- SSR Safe: Compatible with server-side rendering, avoiding errors in environments without a
window
object. - Optimized for Accuracy: Uses
useLayoutEffect
for precise dimension measurements after DOM mutations.
Installation
Choose and install individual hooks that suit your project needs, or install the entire collection for a full suite of utilities.
Installing Only Current Hooks
npm install @custom-react-hooks/use-element-size
or
yarn add @custom-react-hooks/use-element-size
Installing All Hooks
npm install @custom-react-hooks/all
or
yarn add @custom-react-hooks/all
Importing the Hook
The useElementSize
hook must be imported using a named import as shown below:
Named Import:
import { useElementSize } from '@custom-react-hooks/use-element-size';
This approach ensures that the hook integrates seamlessly into your project, maintaining consistency and predictability in how you use our package.
Usage
import React, { useRef, useState } from 'react';
import { useElementSize } from '@custom-react-hooks/all';
const ElementSizeComponent = () => {
const [setRef, size] = useElementSize();
return (
<div className="element-size">
<div
ref={setRef}
className="resize"
>
<p>Drag from the bottom-right corner to resize.</p>
</div>
<br />
<div>Current Size:</div>
<div className="btns">
<p>
Width: <span>{size.width}px</span>
</p>
<p>
Height: <span>{size.height}px</span>
</p>
</div>
</div>
);
};
export default ElementSizeComponent;
In this example, useElementSize
is used to measure and display the dimensions of a div
element.
API Reference
Parameters
ref
: A React ref object attached to the element whose size you want to measure.
Returns object
width
: width of the elementheight
: height of the element.
Use cases
- Responsive Components: Adjust component behavior or style based on its size.
- Layout Calculations: Calculate layout for items like grids or masonry layouts that depend on element sizes.
- Size-dependent Rendering: Render different content or components based on available size.
- Animations and Transitions: Trigger animations or transitions when an element's size changes.
- Optimizing Canvas or SVG: Adjust dimensions for canvas or SVG elements based on their container size.
Contributing
Your contributions to improve useElementSize
are welcome. Feel free to submit issues or pull requests to the repository.