@crystallize/react-layout
v3.2.0
Published
Helpers for setting up main layout with side menus
Downloads
120
Readme
react-layout
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.
Install
yarn add @crystallize/react-layout
Usage
import CrystallizeLayout, { LayoutContext } from '@crystallize/react-layout';
<CrystallizeLayout left={LeftComponent} right={RightComponent}>
<main>
<LayoutContext.Consumer>
{({ state, actions }) => (
<div>
<div>Left shown? {state.leftShown ? 'yes' : 'no'}</div>
<div>
Right shown? {state.rightShown ? 'yes' : 'no'}
</div>
<div>Content pushed: {state.contentPushed}</div>
<button onClick={actions.showLeft}>Show left menu</button>
<button onClick={actions.showRight}>Show right menu</button>
</div>
)}
</LayoutContext.Consumer>
</main>
</CrystallizeLayout>
Exports
- (default) CrystallizeLayout
- LayoutContext
- actions
- showLeft
- showRight
- hideLeft
- hideRight
- hideBoth
- toggleLeft
- toggleRight
- state
- leftShown
- rightShown
- contentPushed
- actions
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)