[Transpilation / Polyfilling](#transpilation--polyfilling) section.

```tsx
import React from "react";
import useResizeObserver from "use-resize-observer";

const App = () => {
  const { ref, width = 1, height = 1 } = useResizeObserver<HTMLDivElement>();

  return (
    <div ref={ref}>
      Size: {width}x{height}
    </div>
  );
};
```

To observe a different box size other than content box, pass in the `box` option, like so:

```tsx
const { ref, width, height } = useResizeObserver<HTMLDivElement>({
  box: "border-box",
});
```

Note that if the browser does not support the given box type, then the hook won't report any sizes either.

### Box Options

Note that box options are experimental, and as such are not supported by all browsers that implemented ResizeObservers. (See [here](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry).)

`content-box` (default)

Safe to use by all browsers that implemented ResizeObservers. The hook internally will fall back to `contentRect` from
the old spec in case `contentBoxSize` is not available.

`border-box`

Supported well for the most part by evergreen browsers. If you need to support older versions of these browsers however,
then you may want to feature-detect for support, and optionally include a polyfill instead of the native implementation.

`device-pixel-content-box`

Surma has a [very good article](https://web.dev/device-pixel-content-box/) on how this allows us to do pixel perfect
rendering. At the time of writing, however this has very limited support.
The advices on feature detection for `border-box` apply here too.

### Custom Rounding

By default this hook passes the measured values through `Math.round()`, to avoid re-rendering on every subpixel changes.

If this is not what you want, then you can provide your own function:

**Rounding Down Reported Values**

```tsx
const { ref, width, height } = useResizeObserver<HTMLDivElement>({
  round: Math.floor,
});
```

**Skipping Rounding**

```tsx
import React from "react";
import useResizeObserver from "use-resize-observer";

// Outside the hook to ensure this instance does not change unnecessarily.
const noop = (n) => n;

const App = () => {
  const {
    ref,
    width = 1,
    height = 1,
  } = useResizeObserver<HTMLDivElement>({ round: noop });

  return (
    <div ref={ref}>
      Size: {width}x{height}
    </div>
  );
};
```

Note that the round option is sensitive to the function reference, so make sure you either use `useCallback`
or declare your rounding function outside of the hook's function scope, if it does not rely on any hook state.
(As shown above.)

### Getting the Raw Element from the Default `RefCallback`

Note that "ref" in the above examples is a `RefCallback`, not a `RefObject`, meaning you won't be
able to access "ref.current" if you need the element itself.

To get the raw element, either you use your own RefObject (see later in this doc),
or you can merge the returned ref with one of your own:

```tsx
import React, { useCallback, useEffect, useRef } from "react";
import useResizeObserver from "use-resize-observer";
import mergeRefs from "react-merge-refs";

const App = () => {
  const { ref, width = 1, height = 1 } = useResizeObserver<HTMLDivElement>();

  const mergedCallbackRef = mergeRefs([
    ref,
    (element: HTMLDivElement) => {
      // Do whatever you want with the `element`.
    },
  ]);

  return (
    <div ref={mergedCallbackRef}>
      Size: {width}x{height}
    </div>
  );
};
```

## Passing in Your Own `ref`

You can pass in your own ref instead of using the one provided.
This can be useful if you already have a ref you want to measure.

```ts
const ref = useRef<HTMLDivElement>(null);
const { width, height } = useResizeObserver<HTMLDivElement>({ ref });
```

You can even reuse the same hook instance to measure different elements:

[CodeSandbox Demo](https://codesandbox.io/s/use-resize-observer-reusing-refs-buftd)

## Measuring a raw element

There might be situations where you have an element already that you need to measure.
`ref` now accepts elements as well, not ju