Skip to main content
Version: 2.xx.xx

<LayoutWrapper>

Overview​

<LayoutWrapper> wraps its contents in refine's layout with all customizations made in <Refine> component. It is the default layout used in resource pages. It can be used in custom pages to use global layout.

This component accepts layout customizations to further customize the layout parameters (Title, Sider, Header, Footer, Layout, OffLayoutArea) defined in <Refine> component.

Usage​

<LayoutWrapper> can be used inside custom pages to use global layout with all its customizations.

An example use in a custom page may look like this:

App.tsx
import { Refine, Authenticated, LayoutWrapper } from "@pankod/refine";

import routerProvider from "@pankod/refine-react-router";
import dataProvider from "@pankod/refine-simple-rest";
import "@pankod/refine/dist/styles.min.css";

import { PostList } from "pages/posts";

const API_URL = "https://api.fake-rest.refine.dev";

const AuthenticatedPostReview = () => {
return (
<Authenticated>
<LayoutWrapper Sider={() => <></>}>
<PostReview />
</LayoutWrapper>
</Authenticated>
);
};

const App: React.FC = () => {
return (
<Refine
routerProvider={{
...routerProvider,
routes: [
{
exact: true,
component: AuthenticatedPostReview,
path: "/authenticated-page",
},
] as typeof routerProvider.routes,
}}
dataProvider={dataProvider(API_URL)}
resources={[{ name: "posts", list: PostList }]}
/>
);
};

export default App;

In this example, we hide the left sider only for this page. The rest should look same as resource pages.

API Reference​

Properties​

PropertyDescriptionTypeDefault
dashboardboolean*
LayoutOuter component that renders other componentsReact.FC*
SiderCustom sider to useReact.FC*
HeaderCustom header to useReact.FC*
TitleCustom title to useReact.FC*
FooterCustom footer to useReact.FC*
OffLayoutAreaCustom off layout area to useReact.FC*

*: These props have default values in RefineContext and can also be set on <Refine> component.