Portal is a component that allows you to render a component in a different part of the DOM, at the top level of the document. Useful for fixing z-index stacking contexts.

Usage

Import

import { Portal } from '@passfort/castle'
content_copy
Copy

Example

The card you see below is rendered outside of its DOM hierarchy. Great for overlaying elements on top of the page.

<Portal>
  <Card bottom={3} right={3} position="fixed">
    <CardHeader>Portal Card</CardHeader>
    <CardBody>
      <Text>Here!</Text>
    </CardBody>
  </Card>
</Portal>
<Portal>
  <Card bottom={3} right={3} position="fixed">
    <CardHeader>Portal Card</CardHeader>
    <CardBody>
      <Text>Here!</Text>
    </CardBody>
  </Card>
</Portal>
content_copy
Copy
live example