Helpers for setting up main layout with side menus


363.2.02 years ago4 years agoMinified + gzip package size for @crystallize/react-layout in KB


alt text


Helpers for setting up main layout with side menus. React components for building Crystallize (GraphQL based PIM) powered React commerce with SSR using Next.js.


yarn add @crystallize/react-layout


import CrystallizeLayout, { LayoutContext } from '@crystallize/react-layout';

<CrystallizeLayout left={LeftComponent} right={RightComponent}>
            {({ state, actions }) => (
                    <div>Left shown? {state.leftShown ? 'yes' : 'no'}</div>
                        Right shown? {state.rightShown ? 'yes' : 'no'}
                    <div>Content pushed: {state.contentPushed}</div>
                    <button onClick={actions.showLeft}>Show left menu</button>
                    <button onClick={actions.showRight}>Show right menu</button>


  • (default) CrystallizeLayout
  • LayoutContext
    • actions
      • showLeft
      • showRight
      • hideLeft
      • hideRight
      • hideBoth
      • toggleLeft
      • toggleRight
    • state
      • leftShown
      • rightShown
      • contentPushed

Component props

  • left
  • right
  • leftWidth
  • rightWidth
  • width (for both left and right)
  • transitionProp ('left/right' or 'transform')

contentPushed (string)

Reflects the current offset the content has been pushed. Is by default

  • 300px (left menu is shown)
  • 0px (no menu is shown)
  • -300px (right menu is shown)

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.