use-true-element-size

A simple and versatile use hook to track for the DOM-element sizes (width and height)

A hook that returns the current width and height of the DOM element. The main benefit that hook doesn't use window resize event and can be useful in cases of element resizing without window resizing.

Quick start

JavaScript:

import { useRef } from 'react';
import { useTrueElementSize } from 'use-true-element-size';

const Example = () => {
  const divRef = useRef(null);
  const { elementWidth, elementHeight } = useTrueElementSize(divRef);

  return (
    <div ref={divRef}>
      width: ${elementWidth}
      height: ${elementHeight}
    </div>
  );
};

TypeScript:

import { useRef } from 'react';
import { useTrueElementSize } from 'use-true-element-size';

const Example = () => {
  const divRef = useRef<HTMLDivElement>(null);
  const { elementWidth, elementHeight } = useTrueElementSize(divRef);

  return (
    <div ref={divRef}>
      width: ${elementWidth}
      height: ${elementHeight}
    </div>
  );
};

Install

npm:

npm install use-true-element-size

yarn:

yarn add use-true-element-size

API

Options

| | Type | Description | | ---------- | :----------------------: | --------------------------------------------------------: | | elementRef | RefObject<HTMLElement> | Ref object assigned to the HTML element to track its size |

Returns {elementWidth: number, elementHeight: number}

| | Type | Description | | ------------- | :--------: | --------------------: | | elementWidth | number | Width of the element | | elementHeight | centered | Height of the element |

License

MIT © [https://github.com/onceup](https://github.com/https://github.com/onceup)