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

import { createTeleporter } from 'react-teleporter'

const Teleporter = createTeleporter()