Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
react-portal
Advanced tools
appends stuff from your React component to a new React component at document.body - great for modals or lightboxes
The react-portal package allows you to render components into a DOM node that exists outside the DOM hierarchy of the parent component. This is useful for creating modals, tooltips, and other UI elements that need to be rendered outside the main document flow.
Basic Portal Usage
This example demonstrates the basic usage of the react-portal package. It renders a div element outside the main DOM hierarchy, which can be useful for creating modals or tooltips.
import React from 'react';
import ReactDOM from 'react-dom';
import { Portal } from 'react-portal';
function App() {
return (
<div>
<h1>Main App</h1>
<Portal>
<div style={{ position: 'absolute', top: '50px', left: '50px', background: 'white', border: '1px solid black', padding: '10px' }}>
This is a portal content
</div>
</Portal>
</div>
);
}
export default App;
Custom Portal Target
This example shows how to use a custom DOM node as the target for the portal. The content will be rendered inside the specified custom target element.
import React, { useRef } from 'react';
import ReactDOM from 'react-dom';
import { Portal } from 'react-portal';
function App() {
const customTarget = useRef(null);
return (
<div>
<h1>Main App</h1>
<div ref={customTarget} id="custom-target" style={{ position: 'relative', height: '200px', border: '1px solid black' }}>
Custom Target
</div>
<Portal node={customTarget.current}>
<div style={{ position: 'absolute', top: '10px', left: '10px', background: 'white', border: '1px solid black', padding: '10px' }}>
This is a portal content inside custom target
</div>
</Portal>
</div>
);
}
export default App;
The react-dom package provides the createPortal function, which allows you to render children into a DOM node that exists outside the DOM hierarchy of the parent component. It is a part of the React core library and offers similar functionality to react-portal.
The react-reverse-portal package allows you to create portals that can be moved around in the DOM. It provides more advanced features compared to react-portal, such as the ability to move portals between different parts of the DOM dynamically.
The react-teleport package offers a simple API for rendering components outside the main DOM hierarchy. It is similar to react-portal but provides additional features like teleporting components to different parts of the DOM based on conditions.
FAQs
To make your life with React Portals easier.
The npm package react-portal receives a total of 0 weekly downloads. As such, react-portal popularity was classified as not popular.
We found that react-portal demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.