AutoSizer

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 ofAutoSizer.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
}

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Examples

Basic

Props

REQUIRED

function

string

function

enum[]

object

Type definitions

OnResizeArguments

Usage

`OnResizeArguments`