gregberge/react-teleporter

npm install react-teleporter

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

const Teleporter = createTeleporter()

<Teleporter.Target as="footer" />

const Teleporter = createTeleporter()

<Teleporter.Target onClick={/* ... */} />

const Teleporter = createTeleporter();

function CustomTarget() {
  const targetRef = Teleporter.useTargetRef();
  return <div ref={targetRef} />;
}

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

const Teleporter = createTeleporter();

const forwardEvent = (element) => (event) =>
  element.dispatch(new Event(event.type, event));

<Teleporter.Source>
  {(element) => <div onClick={forwardEvent(element)}></div>}
</Teleporter.Source>;

import { createTeleporter } from "react-teleporter";

const Teleporter = createTeleporter();