Skip to main content
Elastic UI
Elastic UI
Getting startedComponentsUtilitiesPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Accessibility
  • Auto sizer
  • Color palettes
  • Copy
  • CSS utility classes
  • Delay
  • Error boundary
  • Focus trap
  • Highlight and mark
  • HTML ID generator
  • I18n
  • Inner text
  • Mutation observer
  • Outside click detector
  • Overlay mask
  • Portal
  • Pretty duration
  • Provider
  • Resize observer
  • Scroll
  • Text diff
  • Text truncation
  • Window events
  • EUI
  • Resize observer

Resize observer

EuiResizeObserver is a wrapper around the Resizer Observer API which allows watching for changes to the content rectangle of DOM elements. Unlike

EuiMutationObserver, EuiResizeObserver does not take parameters, but it does fire a more efficient and informative callback when resize events occur.

This is a render prop component, EuiResizeObserver will pass a

ref callback which you must put on the element you wish to observe.

Loading...

useResizeObserver hook

There is also a React hook, useResizeObserver, which provides the same observation functionality.

Loading...

Props

EuiResizeObserver

๐˜‚๐˜‚
โœ„๐˜—โœ„๐˜—
Prop
โ†ฆ
Description and type
โ†ฆ
Default value
โ†ต
Prop
children#
โ†ฆ
Description and type

ReactNode to render as this component's content

Type: (ref: (e: HTMLElement) => void) => ReactNode
โ†ฆ
Default value
Required
โ†ต
Prop
onResize#
โ†ฆ
Description and type
Type: (dimensions: { height: number; width: number; }) => void
โ†ฆ
Default value
Required
โ†ต
๐˜‚๐˜‚
Edit this page

Previous
Provider
Next
Scroll
  • useResizeObserver hook
  • Props
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with โค by Elastic