@crystallize/react-layout

3.2.0 • Public • Published

alt text

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

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)

Readme

Keywords

none

Package Sidebar

Install

npm i @crystallize/react-layout

Weekly Downloads

59

Version

3.2.0

License

MIT

Unpacked Size

8.62 MB

Total Files

40

Last publish

Collaborators

  • crystallize-admin