Skip to content

gregberge/react-teleporter

main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

react-teleporter

License npm package npm bundle size CI codecov

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

About

Teleport React components in the same React tree πŸ“‘

Resources

License

Code of conduct

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published