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

The 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, especially when the inertOutside prop of the <Sheet.View> is set to true.

Automatic detection

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

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

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

Wrap in `<ExternalOverlay.Root>`

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

Basic usage

If the third-party overlay is not automatically compatible with the Sheet component, you can wrap it inside of a <ExternalOverlay.Root> to signal its presence 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