react-append-to-body
Advanced tools
Higher order react component that appends components outside of the main applications DOM
React Higher order component that allows you to attach components to the DOM outside of the main app. Supports React 16 and React 15 and less, so works with and without ReactDOM.createPortal.
npm i react-append-to-body --save
import { componentWillAppendToBody } from "react-append-to-body";
/* Some component that you want to attach to the DOM */
function MyComponent({ children }) {
return <div className="myClassName">{children}</div>;
}
const AppendedMyComponent = componentWillAppendToBody(MyComponent);
class MyApp extends React.Component {
render() {
return (
<div>
// this content will be rendered in the main app Some content on my page
// this content will be rendered outside of the main app
<AppendedMyComponent>
The content for my appended component
</AppendedMyComponent>
</div>
);
}
}
/* template */
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1" name="viewport">
</head>
<body class="body">
<div id="my-app"></div>
<script src="/app.js"></script>
</html>
/* output */
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1" name="viewport">
</head>
<body class="body">
<div id="my-app">
<div>
// this content will be rendered in the main app
Some content on my page
</div>
</div>
<div id="append-element-container">
<div class="myClassName">
The content for my appended component
</div>
</div>
<script src="/app.js"></script>
</html>
const AppendedMyComponent = componentWillAppendToBody(MyComponent);
class MyApp extends React.Component {
render() {
return (
<div>
Some content on my page // this content will be rendered in the main app
<AppendedMyComponent
subtreeContainer={"#my-named-element-to-append-with"}
>
The content for my appended component
</AppendedMyComponent> // this content will be rendered outside of the main
app
</div>
);
}
}
/* template */
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1" name="viewport">
</head>
<body class="body">
<div id="my-app"></div>
/* dom node that content will be appended to */
<div id="my-named-element-to-append-with"></div>
<script src="/app.js"></script>
</html>
/* output */
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1" name="viewport">
</head>
<body class="body">
<div id="my-app">
<div>
// this content will be rendered in the main app
Some content on my page
</div>
</div>
<div id="my-named-element-to-append-with">
<div class="myClassName">
The content for my appended component
</div>
</div>
<script src="/app.js"></script>
</html>
If you want to persist Context into the appended component you can do this by simple setting the contextTypes on the appended component.
// using React Router
const Modal = componentWillAppendToBody(Modal);
Modal.contextTypes = {
router: React.PropTypes.any.isRequired
};
subtreeContainer a string that should contain a selector that will work with document.querySelector [MDN]: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
npm run test
npm run demo
Then open up your browser at http://localhost:8777
See React docs for examples for your environment.
FAQs
Higher order react component that appends components outside of the main applications DOM
The npm package react-append-to-body receives a total of 2,459 weekly downloads. As such, react-append-to-body popularity was classified as popular.
We found that react-append-to-body 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
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.