• EnglishEspañol日本語한국어Português
  • Log inStart now

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

import { AutoSizer } from 'nr1'

Examples

Basic

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

REQUIRED
function

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.

function (
args: OnResizeArguments
)

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.

<Array of
<One of

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

OnResizeArguments

{
height: number,

Height of the container

width: number,

Width of the container

}
Copyright © 2024 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.