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

@chakra-ui/portal

Package Overview
Dependencies
Maintainers
3
Versions
320
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@chakra-ui/portal - npm Package Compare versions

Comparing version 2.0.6 to 2.0.7

13

package.json
{
"name": "@chakra-ui/portal",
"version": "2.0.6",
"version": "2.0.7",
"description": "React component used to render children outside the DOM hierarchy of the parent component",

@@ -35,5 +35,5 @@ "keywords": [

"dependencies": {
"@chakra-ui/hooks": "2.0.6",
"@chakra-ui/react-utils": "2.0.3",
"@chakra-ui/utils": "2.0.6"
"@chakra-ui/hooks": "2.0.7",
"@chakra-ui/react-utils": "2.0.4",
"@chakra-ui/utils": "2.0.7"
},

@@ -45,3 +45,3 @@ "peerDependencies": {

"devDependencies": {
"@chakra-ui/button": "2.0.6",
"@chakra-ui/button": "2.0.7",
"@testing-library/react": "13.3.0",

@@ -59,4 +59,3 @@ "@types/react-frame-component": "^4.1.1",

"build:fast": "JSX=1 tsup src/index.ts"
},
"readme": "# @chakra-ui/portal\n\nA wrapper for rendering components in React Portals, with support for nested\nportals and stacking.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/portal\n\n# or\n\nnpm i @chakra-ui/portal\n```\n\n## Import components\n\n```jsx\nimport { Portal, PortalManager } from \"@chakra-ui/portal\"\n```\n\nRender the `PortalManager` once at the root of your application\n\n```jsx\nfunction App() {\n return (\n <ThemeProvider>\n <CSSReset />\n <PortalManager>{/* Your app goes here */}</PortalManager>\n </ThemeProvider>\n )\n}\n```\n\n### Basic usage\n\nPortals are render into the portal manager's node by default not\n`document.body`.\n\n```jsx\n<div>\n <p>Welcome</p>\n <Portal>This text has been portaled</Portal>\n</div>\n```\n\n### Nested portals\n\nNesting portal can be very useful to build complex widgets like nested menu,\npopovers, modal, etc.\n\n```jsx\n<Portal>\n This is a portal.\n <Portal>This is a nested portal</Portal>\n</Portal>\n```\n\n### Custom container\n\nYou can also portal elements into a custom containers. Simply pass a\n`containerRef` prop that points to the `node` of that element.\n\n```jsx\n<>\n <div ref={ref} />\n <Portal containerRef={ref}>\n <h1>Hello world</h1>\n </Portal>\n</>\n```\n"
}
}
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