Third-party “overlay” components are components that are displayed over the current content, and can implement modality features, such as making all HTML elements outside of their bounds non-interactive.

Silk’s sheet component is designed to work seamlessly with such third-party components. However, depending on how they are implemented, you may have to take some steps to ensure compatibility with the Sheet component, especially when the inertOutside prop of the <Sheet.View> is set to true.

Automatic detection

In most cases, a third-party overlay component will work automatically with Silk. In particular, if:

it is rendered directly inside of the sheet <Content.View> underlying HTML element; or
it is appended to the <body> HTML element using a React portal; or
it is rendered inside the <html> HTML element.

In these cases, the third-party overlay component underlying HTML elements will be considered as part of the frontmost presented sheet.

Wrap in `<ExternalOverlay.Root />`

If the third-party overlay component renders in other parts of the DOM, or if its modality mechanism are not automatically compatible with Silk’s, you will need to use the ExternalOverlay component to ensure compatibility.

Basic usage

If the third-party overlay component is not automatically by Silk, you can wrap it inside of a <ExternalOverlay.Root /> to signal its presence to Silk and make it part of the frontmost presented sheet.

import { Menu } from "third-party-lib";
import { ExternalOverlay } from "@silk-hq/components";

const MyMenu = () => (
	<Menu.Root>
	   <Menu.Portal>
	      <ExternalOverlay.Root asChild>
	         <Menu.Content>
	            ...
	         </Menu.Content>
	      </ExternalOverlay.Root>
	   </Menu.Portal>
	</Menu.Root>
);

Using the `contentGetter` prop

If the third-party overlay is out of reach and you cannot wrap it inside of an <ExternalOverlay.Root />, you can use the contentGetter prop.

Automatic detection

Wrap in <ExternalOverlay.Root />

Basic usage

Using the contentGetter prop

Wrap in `<ExternalOverlay.Root />`

Using the `contentGetter` prop