Teleport React components in the same React tree.
npm install react-teleporter
Teleport React components in the same React tree.
š Read how to use it to create scalable layouts
š Checkout the demo on CodeSandbox
``bash`
npm install react-teleporter
`js
import { createTeleporter } from "react-teleporter";
const StatusBar = createTeleporter();
function Header() {
return (
);
}
function Page() {
return (
{/ Teleport "Loading..." into the header /}
);
}
function App() {
return (
Why?
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.
Recipes
$3
Use
property on target to specify another tag.`js
const Teleporter = createTeleporter()
`> Be careful of specifying an element with a ref to a DOM element, it uses React Portals under the hood.
$3
All props are forwarded to target.
js
const Teleporter = createTeleporter() ... /} />
`$3
Use
to create a custom target ref.`js
const Teleporter = createTeleporter();function CustomTarget() {
const targetRef = Teleporter.useTargetRef();
return
;
}
`$3
By default only one
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.`js
const Teleporter = createTeleporter({ multiSources: true })// The target will contains the two links
`$3
Useful for having access to the
element. E.g., to dispatch an event through the Target when something happens in the Source.`js
const Teleporter = createTeleporter();const forwardEvent = (element) => (event) =>
element.dispatch(new Event(event.type, event));
{(element) => }
`API
$3
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.`js
import { createTeleporter } from "react-teleporter";const Teleporter = createTeleporter();
``