Skip to main content
Elastic UI
Elastic UI
Getting startedComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Setup
  • Theming
  • Accessibility
  • Testing
  • Utilities
    • 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
  • Utilities
  • 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