Portal

EuiPortal allows you to append its contained children onto the document body. It is useful for moving fixed elements like modals, tooltips or toasts when you are worried about a z-index or overflow conflict.

Loading...

Inserting portals

There is an optional

insert prop that can specify the portal's location in the DOM. When used, it is important to consider how the location relates to the component lifecycle, as it could be removed from the DOM by another component update.

insert is an object with two key-value pairs: sibling and position. sibling is the React node or HTMLElement to insert the portal next to, and position specifies the portal's relative position, either before or after.

Loading...

A custom flyout

Custom flyouts should only be implemented if your design diverges a lot from

EuiFlyout. You need to implement accessibility features, which can be challenging.

Here are some accessibility considerations you should keep in mind when implementing a custom flyout.

• Use EuiFocusTrap to prevent keyboard-initiated focus from leaving the flyout.
• If you use a EuiOverlayMask, it should be dismissed when clicked outside. For that you can pass to your EuiFocusTrap onClickOutside prop a method to close the flyout.
• When pressing the ESC key your flyout should close. Use a EuiWindowEvent to listen for the key down event.
• Pass an ID to the first heading in the flyout id={headingId}.
• Pass to your EuiPanel aria-labelledby={headingId} to announce the flyout to screen readers.

You should also take into account some design considerations:

• Use a EuiPanel for the background.
• A flyout should always have a close button on the right top corner. This gives a visual clue that the flyout can be closed.
• For writing CSS consider using our theme tokens.

In the following demo, you can see how to create your own flyout with all the recommended accessibility and design features:

Loading...

Props

EuiPortal

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop children# ↦	Description and type ReactNode to render as this component's content Type: ReactNode ↦	Default value Required ↵
Prop insert# ↦	Description and type If not specified, EuiPortal will insert itself into the end of the document.body by default Type: { sibling: HTMLElement; position: "before" | "after"; } ↦	Default value ↵
Prop portalRef# ↦	Description and type Optional ref callback Type: (ref: HTMLDivElement) => void ↦	Default value ↵

𐘂𐘂