import { useSlots } from "react-hook-layout";

export const MyLayout = () => {
  const { A, B } = useSlots("A", "B");

  return (
    <>
      <article>{A}</article>
      <footer>{B}</footer>
    </>
  );
};

import { defineSlots, useLayout } from "react-hook-layout";
import { MyLayout } from "./MyLayout";

const { A, B } = defineSlots("A", "B");

const MyPage = () => {
  const Layout = useLayout(MyLayout);

  return (
    <Layout>
      <A>My article</A>
      <B>Author by Me</B>
    </Layout>
  );
};