API REFERENCE

Root

The entry point component that receive scheme, behind the scene is a context provider.

Usage example

import styled from 'styled-components'
import Layout, { Root } from '@mui-treasury/layout';

cosnt scheme = Layout()

const App = () => {
  return (
    <Root scheme={scheme}>
    </Root>
  )
}

Props

  • theme
    • type : Material-ui Theme
    • default : createMuiTheme()
    • description : your app’s theme
  • themeProviderOmitted
    • type : boolean
    • default : false
    • description : if your app already have ThemeProvider on top of Root, set this prop to true.
  • initialState
    • type : State

    • default :

    • description : initial state for layout (sidebar’s collapsed and open)

      const initialState = {
        sidebar: {
          id1: { collapsed: true },
          id2: { open: true },
        },
      }
      
      <Root initialState={initialState} />
  • children
    • type : ReactElement | Function
    • default :
    • example : you can provide children as a function to access layout state.
      <Root>
        {({ sidebar }) => {
          return (
            <div>
              {sidebar.id1.open ? 'Sidebar1 is open' : 'Sidebar1 is closed'}
              {sidebar.id2.collapsed
                ? 'Sidebar2 is collapsed'
                : 'Sidebar2 is not collapsed'}
            </div>
          );
        }}
      </Root>

Styling

Root does not render DOM, no need to style.