PortalProvider

@coinbase/cds-web@8.34.1

A component that manages the rendering of portals for overlay components.

Import

import { PortalProvider } from '@coinbase/cds-web/overlays/PortalProvider'

SourceView source codeStorybookView Storybook

---

Peer dependencies

• react-dom: ^18.3.1

---

Related components

• Modal,
• Toast,
• Alert

---

󰏖

View as Markdown

Basic usage

The PortalProvider component is typically used at the root of your application to manage overlay components:

Loading...

󰙡

Live Code

function Example() {
  return (
    <PortalProvider>
      <Box padding={4} bordered borderRadius={200}>
        Your app content
      </Box>
    </PortalProvider>
  );
}

Custom Portal Nodes

You can disable the default portal rendering and use the PortalNodes component separately:

Loading...

󰙡

Live Code

function Example() {
  return (
    <PortalProvider renderPortals={false}>
      <Box padding={4} bordered borderRadius={200}>
        Your app content
      </Box>
      <PortalNodes />
    </PortalProvider>
  );
}

Toast Example

The PortalProvider's toastBottomOffset prop sets the default bottom offset for all toasts:

Loading...

󰙡

Live Code

function Example() {
  function ToastDemo() {
    const toast = useToast();
    return (
      <Box padding={4} bordered borderRadius={200}>
        <Button onClick={() => toast.show('This toast appears with a custom bottom offset (80px)')}>
          Show Toast
        </Button>
      </Box>
    );
  }

  return (
    <PortalProvider toastBottomOffset={80}>
      <ToastDemo />
    </PortalProvider>
  );
}