Skip to content
Teleport React components in the same React tree πŸ“‘
Branch: master
Clone or download

README.md

react-teleporter

License npm package CircleCI codecov Code style Dependencies DevDependencies Small size

Teleport React components in the same React tree.

npm install react-teleporter

Example

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>
  )
}

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

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} />
}

API

createTeleporter

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.