@crystallize/react-layout

Helpers for setting up main layout with side menus

Stats

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

Readme

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)

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.