Crystallize
React Layout

React Layout

Helpers for setting up main layout with side menus

NPM logoReact Layout

Usage

import CrystallizeLayout, { toggleLeft, toggleRight } from '@crystallize/react-layout';<CrystallizeLayout left={LeftComponent} right={RightComponent}> {({ leftShown, rightShown, contentPushed}) => ( <div> <button onClick={() =>toggleLeft}> Toggle left menu </button> <button onClick={() => toggleRight}> Toggle right menu </button> </div>)}</CrystallizeLayout>

Passed props

All direct children of CrystallizeLayout gets passed the following propsleftShown (boolean)Reflects if the left menu is shownrightShown (boolean)Reflects if the right menu is showncontentPushed (string)Reflects the current offset the content has been pushed. Is usually

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