react-layouts showcase-client
Client entry demo for @adonis-kit/react-layouts/client, covering layout composition and props hooks.
Composition Order
withLayouts uses inside-out composition; array tail is outermost layout.
withLayouts(Page, [Layout1, Layout2])
<Layout2>
<Layout1>
<Page />
</Layout1>
</Layout2>Basic - Page + Named Layouts
Built on the Composition Order rule above. This demo focuses on useLayoutProps(BasicPage) and page-prop-driven layout UI.
Sidebar
Layout chrome with a simple navigation shell.
Header
Reads page title via useLayoutProps(BasicPage)
Page title: Hello
Page
The innermost page component.
title: Hello
Advanced - No-arg Hook, AllProps, Nested Composition
Also follows the Composition Order rule above, then adds useLayoutProps<T>(), useAllLayoutProps(), and nested withLayouts.
SubLayout
Inner layout composed via nested withLayouts.
Page user (from outer context): Alice
ComposedLayout
This layout itself uses withLayouts internally.
PropsInspector
Uses useLayoutProps<T>() (no argument) and useAllLayoutProps()
useLayoutProps<AdvancedPageProps>().user: n/a
useAllLayoutProps().size: 2
Page
user: Alice