absent-sapphire•2y ago

Refine Layout for Header & Footer

Hi! I was reading docs & don’t quite understand how the Layout prop works for <Refine>. Currently I have Layout={Header} where Header is a component. But I also see there’s a Header and Footer prop as well. When would we use Header/Footer vs Layout? I’m using Material UI, if it makes a difference. Sorry if this was confusing to understand. Thanks!

7 Replies

refine-support-bot•2y ago

Hi, I am refine support bot :wave:. I am here to help you with your question. I searched for the answer to your question in the refine documentation and found an answer! 🏆
Answer: The Layout prop is used for global customization, while the Header and Footer props are used for local customization. SOURCES: ./docs/api-reference/mui/customization/layout.md, ./docs/advanced-tutorials/custom-layout.md, ./docs/api-reference/chakra-ui/customization/layout.md, ./docs/api-reference/core/components/refine-config.md

Note: If this is the answer you need, then we are very lucky. If not, please wait for someone from the refine core team or the community to try to help you.

adverse-sapphire•2y ago

Hey @sheepndreams I did not fully understand the problem. Can you explain with a sample code?

absent-sapphire•2y ago

This is the code in App.tsx You can see in the Refine component, there's a Layout prop which is taking in a Header component.

function App() {
  return (
    <ColorModeContextProvider>
      <ThemeProvider theme={customTheme}>
        <CssBaseline />
        <GlobalStyles styles={{ html: { WebkitFontSmoothing: 'auto' } }} />
        <RefineSnackbarProvider>
          <Refine
            dataProvider={dataProvider('https://api.fake-rest.refine.dev')}
            notificationProvider={notificationProvider}
            Layout={Header}
            ReadyPage={ReadyPage}
            catchAll={<ErrorComponent />}
            routerProvider={routerProvider}
            resources={[{ name: 'products' }]}
          />
        </RefineSnackbarProvider>
      </ThemeProvider>
    </ColorModeContextProvider>
  );
}

function App() {
  return (
    <ColorModeContextProvider>
      <ThemeProvider theme={customTheme}>
        <CssBaseline />
        <GlobalStyles styles={{ html: { WebkitFontSmoothing: 'auto' } }} />
        <RefineSnackbarProvider>
          <Refine
            dataProvider={dataProvider('https://api.fake-rest.refine.dev')}
            notificationProvider={notificationProvider}
            Layout={Header}
            ReadyPage={ReadyPage}
            catchAll={<ErrorComponent />}
            routerProvider={routerProvider}
            resources={[{ name: 'products' }]}
          />
        </RefineSnackbarProvider>
      </ThemeProvider>
    </ColorModeContextProvider>
  );
}

I guess my question is what is the difference using Layout prop vs. the Header/Footer props? And the best way to utilize it using MUI

adverse-sapphire•2y ago

It contains components such as Header, Footer Sider in Layout. You can think of it like a container.

absent-sapphire•2y ago

Just to confirm, there's like 2 ways to customize the layout: 1) Create a custom layout React.FC to pass into Layout or 2) Use MUI default Layout, and also pass Header and Footer into Refine component?

Omer•2y ago

Hey @sheepndreams 👋, Can you check this doc? I think it's can be helpful ⚡️ https://refine.dev/docs/api-reference/mui/customization/mui-custom-layout/

Layout | refine

You can create custom layouts using and components.

absent-sapphire•2y ago

Thanks!