Skip to content
Teleport React components in the same React tree πŸ“‘
JavaScript
Branch: master
Clone or download
Latest commit 1dd0283 Feb 22, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.github
src
types
.eslintignore
.eslintrc.json
.gitignore
.npmignore
.prettierignore
.prettierrc
CHANGELOG.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE
README.md
babel.config.js
package.json
rollup.config.js
yarn.lock

README.md

react-teleporter

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

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.