This hook is a variation of the approach, described on Composition vs Inheritance documentation page.
Layout is now a separate component, and can be applied on different pages. Also, it's easy to switch layouts in runtime.
npm i react-hook-layout
- Layout component look like this:
import { useSlots } from "react-hook-layout";
export const MyLayout = () => {
const { A, B } = useSlots("A", "B");
return (
<>
<article>{A}</article>
<footer>{B}</footer>
</>
);
};- Page component using layout:
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>
);
};Page will render to:
<article>My article</article>
<footer>Author by Me</footer>Check examples on the demo page
or
Run storybook localy:
git clone https://github.com/ytiurin/react-hook-layout.git
cd react-hook-layout/storybook
npm run storybook