---
title: AutoSizer
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/structure/AutoSizer
---

The `<AutoSizer>` component provides functionality to react to changes in size in the element in which they are contained, by measuring it. When the `width` or the `height` of that outer element changes, the children are rerendered and will receive the new the measurements as an object.

### Usage

```js
import { AutoSizer } from 'nr1'
```

### Examples

#### Basic

```jsx
function render() {
  const style = {
    backgroundColor: '#d8211a1a',
    border: 'dashed 1px #d8211a4d',
  };


  return (
    <AutoSizer>
      {({ width, height }) => (
        <div style={{ ...style, height, width }}>
          width: {width}, height: {height}
        </div>
      )}
    </AutoSizer>
  );
}
```

### Props

| `children` REQUIREDfunction | Children function that will be called every time the parent resizes. It is called with an object containing `width` and `height` keys, and must return the React element to be rendered.                                                                                                                                                                                                   |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `className` string          | Classname for custom styling.                                                                                                                                                                                                                                                                                                                                                              |
| `onResize` function         | Callback invoked when the container resizes.                                                                                                                                                                                                                                                                                                                                               |
| `spacingType` enum\[]       | Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like `margin` or `padding`. To omit a value, use `SPACING_TYPE.OMIT`. AutoSizer.SPACING_TYPE.EXTRA_LARGE, AutoSizer.SPACING_TYPE.LARGE, AutoSizer.SPACING_TYPE.MEDIUM, AutoSizer.SPACING_TYPE.NONE, AutoSizer.SPACING_TYPE.OMIT, AutoSizer.SPACING_TYPE.SMALL, |
| `style` object              | Inline style for custom styling.                                                                                                                                                                                                                                                                                                                                                           |

### Type definitions