JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3179121
  • Score
    100M100P100Q309751F
  • License MIT

Package Exports

  • react-virtualized-auto-sizer
  • react-virtualized-auto-sizer/dist/react-virtualized-auto-sizer.cjs
  • react-virtualized-auto-sizer/dist/react-virtualized-auto-sizer.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-virtualized-auto-sizer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-virtualized-auto-sizer logo

react-virtualized-auto-sizer: Measures the available width and height of an HTMLElement and passes those values as props to a Child component. Refer to the docs for usage examples.

[!NOTE] This package began as a fork of the AutoSizer component from react-virtualized, and was intended for use with earlier versions of react-window. More recent versions of react-window use ResizeObserver natively and do not require this package.

If you like this project, 🎉 become a sponsor or ☕ buy me a coffee

Install

npm install --save react-virtualized-auto-sizer

FAQs

Frequently asked questions can be found here.

Documentation

AutoSizer

Measures the available width and height of its parent HTMLElement and passes those values as width and height props to its children.

ℹī¸ This component began as a fork of the javascript-detect-element-resize package.

Required props

None

Optional props

Name Description
box

Corresponds to the ResizeObserver box parameter. Sets which box model the observer will observe changes to.

  • border-box: Size of the box border area as defined in CSS.
  • content-box: Size of the content area as defined in CSS.
  • device-pixel-content-box: The size of the content area as defined in CSS, in device pixels, before applying any CSS transforms on the element or its ancestors.
className

Class name to be applied to the auto-sizer HTMLElement.
data-testid

Test id attribute to interop with frameworks like Testing Library.
id

Unique id attribute to attach to root DOM element.
nonce

Nonce used for inline StyleSheet in browsers/environments that do not support the ResizeObserver API.
onResize

Optional callback notified after a resize. @param size New width and height of parent element
style

Style properties to be applied to the auto-sizer HTMLElement.
tagName

Optional HTML tag name for root HTMLElement; defaults to "div".
Child

Child component to be passed the available width and height values as props. @deprecated Use the ChildComponent or renderProp props instead.
ChildComponent

Child component to be passed the available width and height values as props.

ℹī¸ Use renderProp instead if you need access to local state.

⚠ī¸ Width and height are undefined during the during the initial render (including server-rendering).
renderProp

Render prop to be passed the available width and height values as props.

ℹī¸ Use ChildComponent instead for better memoization if you do not need access to local state.

⚠ī¸ Width and height are undefined during the during the initial render (including server-rendering).