sample render-props vs react-teleporter

react-teleporter.tsx

import { createTeleporter } from "react-teleporter";
 
const HeaderTitleSlot = createTeleporter();
const HeaderActionsSlot = createTeleporter();
 
const AppLayout = ({ children: content }) => {
  return (
    <>
      <Sidebar />
      <Header>
        <HeaderTitleSlot.Target />
        <HeaderActionsSlot.Target />
      </Header>
      {content}
    </>
  );
};
 
export const HeaderTitle = HeaderTitleSlot.Source;
export const HeaderActions = HeaderActionsSlot.Source;
 
const DashboardPage = () => {
  return (
    <AppLayout>
      <HeaderTitle>Dashboard</HeaderTitle>
      Dashboard Content goes here!
    </AppLayout>
  );
};
 
const DetailsPage = () => {
  return (
    <AppLayout>
      <HeaderTitle><GoBack /> Details</HeaderTitle>
      <HeaderActions>
        <Add />
        <Edit />
        <Delete />
      </HeaderActions>
      DetailsPage Content goes here!
    </AppLayout>
  );
};

render-props.tsx

const AppLayout = ({
  title: headerTitle,
  action: headerActions,
  children: content,
}) => {
  return (
    <>
      <Sidebar />
      <Header title={headerTitle} actions={headerActions} />
      {content}
    </>
  );
};
 
const DashboardPage = () => {
  return <AppLayout title="Dashboard">Dashboard Content goes here!</AppLayout>;
};
 
const DetailsPage = () => {
  return (
    <AppLayout
      title={
        <>
          <GoBack /> Details
        </>
      }
      actions={
        <>
          <Add />
          <Edit />
          <Delete />
        </>
      }
    >
      DetailsPage Content goes here!
    </AppLayout>
  );
};