@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)

    Keywords

    none

    Install

    npm i @crystallize/react-layout

    DownloadsWeekly Downloads

    67

    Version

    3.2.0

    License

    MIT

    Unpacked Size

    8.62 MB

    Total Files

    40

    Last publish

    Collaborators

    • crystallize-admin