Teleport React components in the same React tree.
๐ Read how to use it to create scalable layouts
๐ Checkout the demo on CodeSandbox
npm install react-teleporter
import { createTeleporter } from "react-teleporter";
const StatusBar = createTeleporter();
function Header() {
return (
<header>
<StatusBar.Target />
</header>
);
}
function Page() {
return (
<main>
{/* Teleport "Loading..." into the header */}
<StatusBar.Source>Loading...</StatusBar.Source>
</main>
);
}
function App() {
return (
<div>
<Header />
<Page />
</div>
);
}
In complex app, you may have to configure a part of the application from another. If you know react-helmet it is the same philosophy. You want to configure a part of your application from another place.
Use as
property on target to specify another tag.
const Teleporter = createTeleporter()
<Teleporter.Target as="footer" />
Be careful of specifying an element with a ref to a DOM element, it uses React Portals under the hood.
All props are forwarded to target.
const Teleporter = createTeleporter()
<Teleporter.Target onClick={/* ... */} />
Use useTargetRef
to create a custom target ref.
const Teleporter = createTeleporter();
function CustomTarget() {
const targetRef = Teleporter.useTargetRef();
return <div ref={targetRef} />;
}
By default only one Source
is allowed to be injected into a Target
. Sometimes you may want to inject multiple sources into a single target. Create teleporter with { multiSources: true }
option.
const Teleporter = createTeleporter({ multiSources: true })
<Teleporter.Source multiple>
<a href="#">A link</a>
</Teleporter.Source>
<Teleporter.Source multiple>
<a href="#">Another link</a>
</Teleporter.Source>
// The target will contains the two links
Useful for having access to the Target
element. E.g., to dispatch an event through the Target
when something happens in the Source
.
const Teleporter = createTeleporter();
const forwardEvent = (element) => (event) =>
element.dispatch(new Event(event.type, event));
<Teleporter.Source>
{(element) => <div onClick={forwardEvent(element)}></div>}
</Teleporter.Source>;
createTeleporter
is the only method exposed by this package. It returns an object containing a Target
, a Source
and a useTargetRef
to create a custom target.
import { createTeleporter } from "react-teleporter";
const Teleporter = createTeleporter();