`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.
npm install @custom-react-hooks/use-element-sizeuseElementSize HookuseElementSize 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.
- 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.
Choose and install individual hooks that suit your project needs, or install the entire collection for a full suite of utilities.
``bash`
npm install @custom-react-hooks/use-element-size
or
`bash`
yarn add @custom-react-hooks/use-element-size
`sh`
npm install @custom-react-hooks/all
or
`sh`
yarn add @custom-react-hooks/all
The useElementSize hook must be imported using a named import as shown below:
Named Import:
`javascript`
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.
`typescript
import React, { useRef, useState } from 'react';
import { useElementSize } from '@custom-react-hooks/all';
const ElementSizeComponent = () => {
const [setRef, size] = useElementSize();
return (
Drag from the bottom-right corner to resize.
Width: {size.width}px
Height: {size.height}px
export default ElementSizeComponent;
`
In this example, useElementSize is used to measure and display the dimensions of a div element.
- ref: A React ref object attached to the element whose size you want to measure.
- width: width of the elementheight
- : height of the element.
- 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.
Your contributions to improve useElementSize` are welcome. Feel free to submit issues or pull requests to the repository.