Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@chakra-ui/portal

Package Overview
Dependencies
Maintainers
2
Versions
320
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@chakra-ui/portal

React component used to render children outside the DOM hierarchy of the parent component

  • 2.1.0
  • unpublished
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
476K
increased by7.29%
Maintainers
2
Weekly downloads
 
Created

What is @chakra-ui/portal?

@chakra-ui/portal is a package that provides a way to render components outside the main DOM hierarchy. This is particularly useful for creating modals, tooltips, and other UI elements that need to be rendered in a different part of the DOM tree to avoid clipping or other layout issues.

What are @chakra-ui/portal's main functionalities?

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;

Other packages similar to @chakra-ui/portal

Keywords

FAQs

Package last updated on 18 Jul 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc