Hooks
Functions
useLayout
The useLayout hook provides access to the layout context, which various layout data & method to reassemble the page container, its purposely server for the template layout.
Example
import useLayout from '@/utlis/hooks/useLayout';
const Example = () => {
const { type, adaptiveCardActive, pageContainerReassemble } = useLayout();
return (
<div>
<h1>Layout Type: {type}</h1>
{adaptiveCardActive && <p>Adaptive Card is active</p>}
{/* Example usage of pageContainerReassemble if provided */}
{pageContainerReassemble && pageContainerReassemble({
defaultClass: 'default-class',
pageContainerGutterClass: 'gutter-class',
pageContainerDefaultClass: 'container-class',
PageContainerHeader: () => <header>Header</header>,
PageContainerBody: () => <div>Body</div>,
PageContainerFooter: () => <footer>Footer</footer>,
})}
</div>
);
};
export default Example;
| return | Description | Type | Default |
|---|---|---|---|
| type | Indicates the current layout type, which may influence how components are displayed. | LayoutType | - |
| adaptiveCardActive | Indicating whether an adaptive card layout is active. | boolean | undefined | - |
| pageContainerReassemble | Optional function to dynamically reassemble the page container structure with custom properties and components. | (props: PageContainerReassembleProps) => ReactNode | undefined | - |