Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-teleporter

2.1.1 • Public • Published

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

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>
 
<Teleporter.Source multiple>
  <a href="#">Another link</a>
</Teleporter.Source>
 
// The target will contains the two links

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

Install

npm i react-teleporter

DownloadsWeekly Downloads

3,561

Version

2.1.1

License

MIT

Unpacked Size

18.6 kB

Total Files

9

Last publish

Collaborators

  • avatar