Portal

Portal displays a container that is displayed outside of the current DOM tree.

Import

import { Portal } from "@prismane/core";

Usage

<Box bg="orange" cl="white">
  This will be rendered inside the box
  <Portal bg="ruby" cl="white">
    This will be rendered inside the document.body
  </Portal>
</Box>

Portal With Custom container

function Demo() {
  const ref = useRef(null);

  return (
    <Box bg="orange" cl="white">
      This will be rendered inside the box
      <Portal target={ref}>
        This will be rendered inside the inner container
      </Portal>
      <Box ref={ref} bg="ruby">
        This is the inner container:
      </Box>
    </Box>
  );
}

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

- Portal

Go BackPopover

Up NextProgress