ExternalOverlay

Description

The ExternalOverlay component communicates to the presented Sheets that an overlay component out of Silk’s control is present.

The external overlay can either be included inside of the inert-outside mechanism of the Sheets, or cause the mechanism to be disabled to avoid any potential conflict.

Sub-components

<ExternalOverlay.Root>

<div>

Description

The Root sub-component wraps an external overlay component and allows it to either be included in associated Sheets inert-outside mechanism, or have them disable their mechanism to avoid conflicts with its own.

Notes

It should be mounted or have its disabled prop set to false at the same time as the wrapped overlay component gets mounted, or its own inert-outside mechanism gets set up.

asChild

boolean | undefined

undefined

Description

Defines whether the sub-component underlying element is the default one or the one passed as child of the sub-component.

Values description

true

false | undefined

Notes

• If the child is a React component rendering an element:
  • it must accept props and spread all received props onto the rendered element;
  • in React < 19, it must use React.forwardRef() and pass the received ref to the rendered element.
• See Composition for more information.

disabled

boolean

false

Description

Defines whether the ExternalOverlay is disabled. If it is, it will have no effect.

selfManagedInertOutside

boolean

true

Description

Indicates whether the component used inside the ExternalOverlay sets up its own inert-outside mechanism (i.e. it prevents interaction with elements outside of its bounds). If true, the Sheet(s) present on the page will disable their own inert-outside mechanism to avoid any conflict.

Notes

We run the change in a React layout effect when <ExternalOverlay.Root> gets mounted, or the value of the disabled prop changes. If the wrapped component sets up/cleans up it own mechanism in a React layout effect as well, there may be a conflict. It should be performed in a normal effect instead.

contentGetter

(() => HTMLElement | Element | null | undefined) | string

Description

Defines the content of the ExternalOverlay with either a CSS selector or a function that returns an element instead of using the children prop.

Values description

(() => HTMLElement | Element | null | undefined)

Notes

This prop is useful when you are not able to wrap the element inside of <ExternalOverlay.Root>. One possible reason is that it is created outside of React (e.g. a chat plugin’s bubble).