@chakra-ui/portal

Basic Portal Usage

This example demonstrates the basic usage of the Portal component. The content inside the Portal is rendered outside the main DOM hierarchy, which can be useful for avoiding layout issues.

import { Portal } from '@chakra-ui/portal';
import { Box, Button } from '@chakra-ui/react';

function App() {
  return (
    <Box>
      <Button>Click me</Button>
      <Portal>
        <Box position="absolute" top="50px" left="50px" bg="tomato" p={4}>
          This is a portal content
        </Box>
      </Portal>
    </Box>
  );
}

export default App;

Nested Portals

This example demonstrates the usage of nested portals. The nested portal content is rendered outside the main DOM hierarchy and also outside the parent portal's DOM hierarchy.

import { Portal } from '@chakra-ui/portal';
import { Box, Button } from '@chakra-ui/react';

function App() {
  return (
    <Box>
      <Button>Click me</Button>
      <Portal>
        <Box position="absolute" top="50px" left="50px" bg="tomato" p={4}>
          This is a portal content
          <Portal>
            <Box position="absolute" top="20px" left="20px" bg="blue" p={4}>
              Nested portal content
            </Box>
          </Portal>
        </Box>
      </Portal>
    </Box>
  );
}

export default App;

Conditional Rendering with Portal

This example demonstrates conditional rendering with the Portal component. The portal content is rendered only when the state `isOpen` is true.

import { useState } from 'react';
import { Portal } from '@chakra-ui/portal';
import { Box, Button } from '@chakra-ui/react';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Box>
      <Button onClick={() => setIsOpen(!isOpen)}>Toggle Portal</Button>
      {isOpen && (
        <Portal>
          <Box position="absolute" top="50px" left="50px" bg="tomato" p={4}>
            This is a portal content
          </Box>
        </Portal>
      )}
    </Box>
  );
}

export default App;