Research
Security News
Malicious npm Packages Inject SSH Backdoors via Typosquatted Libraries
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
react-element-portal
Advanced tools
Render a React component inline, but target a DOM element (or elements) by id or selector.
Render a React component inline, but target a DOM element (or elements) by id or selector.
If you're making a shiny new React app where you use React everywhere, for every page, and for the entirety of every page, then you probably don't need this. But if you live in an imperfect world, where you have a server-generated header/footer or some static blog pages, or anything else not fully controlled by React, you can use an ElementPortal
to control those things from inside a single root React element.
npm install react-element-portal --save
Let's say we get this from the server:
<html>
<body>
<!-- Header generated by server -->
<div id="header">
<a href="/">Home</a>
<h1>My Sorta Cool App</h1>
<div id="user">Joe</div>
</div>
<!-- Container for React to do its thing -->
<div id="app"></div>
</body>
</html>
Even though we don't control the header, we can pretend like parts of it are owned by a single React root element.
import ElementPortal from 'react-element-portal';
ReactDOM.render(
// Just rendering a single React element.
<div>
{/* Use some React to spice up our header. */}
<ElementPortal id="user">
<div>
<Menu>
<Label>Joe</Label>
<Items>
<Item>Upgrade</Item>
<Item>Settings</Item>
<Item>Support</Item>
</Items>
</Menu>
</div>
</ElementPortal>
{/* And render our main app as a sibling. */}
<div>
<h1>My App</h1>
<p>This is my main app and gets rendered to #app.</p>
</div>
</div>,
document.getElementById('app')
);
You can also use a selector instead of an id.
<ElementPortal selector=".header .user">
<div>
...
</div>
</ElementPortal>
The resetAttributes
prop can be used to remove any attributes from the DOM node we are rendering to:
// All styles and classes from the node with id "header" will be cleared
<ElementPortal id="header" resetAttributes={['class', 'style']}>
<div className="some-other-class">
...
</div>
</ElementPortal>
ElementPortal
also accepts an optional view
prop that takes a component, to be rendered inside the portal:
<ElementPortal id="header" view={CoolHeaderComponent} />
One advantage of using the view
prop is the ability to derive properties from the original DOM node and pass them to the the component.
Let's say our original DOM element already contains some useful data:
<div id="header" data-user-id="26742">
Joe
</div>
And we would like to render the following component:
const CoolGreeting = ({ userId, name }) => (
<div>Welcome <a href={`/profile/${userId}`}>{name}!</a></div>
)
By using the mapNodeToProps
prop, you can easily pass this data like so:
import dataAttributes from 'data-attributes';
const mapNodeToProps = (node) => ({
name: node.textContent,
...dataAttributes(node)
});
ReactDOM.render(
<ElementPortal id="header" mapNodeToProps={mapNodeToProps} />,
document.getElementById('app')
);
ElementPortal
can also be used as a HOC:
import { withElementPortal } from 'react-element-portal';
import MyComponent from 'my-component';
const MyComponentWithPortal = withElementPortal(MyComponent);
ReactDOM.render(
<MyComponentWithPortal id="user" />,
document.getElementById('app')
);
or composing with other HOC's:
import { withElementPortal } from 'react-element-portal';
import { compose, connect } from 'react-redux';
const MyComponent = (props) => <h1>Hello, {props.name}!</h1>;
const MyComposedComponent = compose(
withElementPortal,
connect((state) => ({ name: state.name }))
)(MyComponent);
Context from your main tree is passed down automatically to your ElementPortal
. For example, if you use Redux, the store
context will not get lost, and using connect
will behave as expected in the children of your ElementPortal
.
FAQs
Render a React component inline, but target a DOM element (or elements) by id or selector.
The npm package react-element-portal receives a total of 162 weekly downloads. As such, react-element-portal popularity was classified as not popular.
We found that react-element-portal demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers 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.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.