<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-core";

import routerProvider from "@pankod/refine-react-router-v6";
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

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