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.
The destination of transportation. You can use CSS Selector to point it. The (real) HTML element is also acceptable.
This 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>
Please 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>
<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>
You 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