npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

react-teleporter

1.1.0 • Public • Published

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

install

npm i react-teleporter

Downloadsweekly downloads

521

version

1.1.0

license

MIT

last publish

collaborators

  • avatar
Report a vulnerability