Nascent Prototype Metaverse

    react-teleporter
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.1 • Public • Published

    react-teleporter

    License npm package CircleCI codecov Code style 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

    8,602

    Version

    2.2.1

    License

    MIT

    Unpacked Size

    19.7 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar