Skip to content
Teleport React components in the same React tree 📡
Branch: master
Clone or download


License npm package CircleCI codecov Code style Dependencies DevDependencies Small size

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 (
      <StatusBar.Target />

function Page() {
  return (
      {/* Teleport "Loading..." into the header */}

function App() {
  return (
      <Header />
      <Page />


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 another target element

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.

Use props on target

All props are forwarded to target.

const Teleporter = createTeleporter()

<Teleporter.Target onClick={/* ... */} />

Create a custom target ref

Use useTargetRef to create a custom target ref.

const Teleporter = createTeleporter()

function CustomTarget() {
  const targetRef = Teleporter.useTargetRef()
  return <div ref={targetRef} />

Use multiple sources

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 multiple>
  <a href="#">Another link</a>

// The target will contains the two links



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()
You can’t perform that action at this time.