react-transport
Advanced tools
Readme
Transports your React component to the outside of React rendering tree.
This package is not stable. The API will be changed frequently. I don't recommend use in production.
Just wrap your React components with <Transport> and tell destination via to props.
import Transport from 'react-transport';
class MyComponent extends React.Component {
render() {
const { count } = this.props;
return <div>
<h2>Inside: {count}</h2>
<Transport to="#outside">
<h2>Outside: {count}</h2>
</Transport>
</div>;
}
}
npm install
Renders React components to detached DOM tree.
npm run bootstrap
Shows online status of Slack members in Gmail.
npm run gmail
npm run test:gmail
react-transport provides <Transport /> component.
<Transport />to: string | HTMLElement [Required]The destination of transportation. You can use CSS Selector to point it. The (real) HTML element is also acceptable.
replace: boolThis is a default behavior of transportation.
<body>
<h1>React</h1>
<div id="outside" />
</body>
<Transport append to="#outside">
<span>Hello</span>
</Transport>
<body>
<h1>React</h1>
<div id="outside">
<div>
<span>Hello</span>
</div>
</div>
</body>
append: boolPlease use this when you want to insert your React component to the end of the destination.
<body>
<h1>React</h1>
<div id="outside">
<p>Bla Bla Bla</p>
</div>
</body>
<Transport append to="#outside">
<span>Hello</span>
</Transport>
<body>
<h1>React</h1>
<div id="outside">
<p>Bla Bla Bla</p>
<div>
<span>Hello</span>
</div>
</div>
</body>
prepend: bool<body>
<h1>React</h1>
<div id="outside">
<p>Bla Bla Bla</p>
</div>
</body>
<Transport prepend to="#outside">
<span>Hello</span>
</Transport>
<body>
<h1>React</h1>
<div id="outside">
<div>
<span>Hello</span>
</div>
<p>Bla Bla Bla</p>
</div>
</body>
wrapBy: string | functionYou can change wrapper element by using this option. In default, your component is wrapped with div tag.
<body>
<h1>React</h1>
<div id="outside" />
</body>
<Transport to="#outside" wrapBy="ul">
<li>Hello</li>
<li>World</li>
</Transport>
<body>
<h1>React</h1>
<div id="outside">
<ul>
<li>Hello</li>
<li>World</li>
</ul>
</div>
</body>
If you pass a function, it will call with children as first argument.
<body>
<h1>React</h1>
<div id="outside" />
</body>
<Transport to="#outside" wrapBy={children => <ul className="dropdown" onClick={this.handleClick}>{children}</ul>}>
<li>Hello</li>
<li>World</li>
</Transport>
<body>
<h1>React</h1>
<div id="outside">
<ul class="dropdown">
<li>Hello</li>
<li>World</li>
</ul>
</div>
</body>
<Transport /> component doesn't work for server-side rendering.
Yuki Kodama / @kuy
FAQs
Transports your React component to the outside of React rendering tree.
We found that react-transport 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
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).
Security News
LDAPjs, an LDAP Client and Server API for Node.js, was decommissioned after its maintainer received an abusive email from a user, raising concerns about this form of abuse as a potential attack vector.
Security News
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.