eui icon indicating copy to clipboard operation
eui copied to clipboard

Add `useEuiContainerQuery` hook

Open tkajtoch opened this issue 4 months ago • 0 comments

Problem Statement

Reacting to a specific (named) container's size is currently impossible in EUI from the JS world. We need a useEuiContainerQuery hook that provides container query features in JS, so that components like EuiFlyout can use it to toggle between the push state (pushMinBreakpoint).

Proposed Solution

The useEuiContainerQuery(attributes: ContainerQueryAttributes, containerName?: string): boolean hook should be added to EUI.

Use Case

This is needed for the new flyout system initiative, the new Kibana chrome, as well as in some internal EUI components

Value / Impact

Having this will enable consumers to react to specific container size changes and adjust their layouts accordingly. It'll be highly beneficial for push flyouts and other resizable layout elements.

Urgency

This is needed in Q2 due to being a dependency for some of the work around the new flyout system, and more.

Do alternatives or workarounds exist?

Alternatives exist, but we need an in-house solution that works well with EUI components and is tightly integrated with them.

tkajtoch avatar Aug 12 '25 10:08 tkajtoch