@trend/layout

Layout

TREND Components layout manager for handling global state. Main use case is for handling Drawer (Overlay) state from another component in the tree.

• Installation
• Basic Usage
• Layout Provider
• withLayoutConsumer
• Layout prop
• Example

Installation

## Has peer dependency with react and react-dom
npm install react react-dom
npm install @trend/layout

Basic Usage

With a module bundler like webpack, use as you would anything else:

// Import main Layout provider.
import Layout from '@trend/layout';

// Import layout context.
import { LayoutContext } from '@trend/layout';

// Import higher-order component layout consumer.
import { withLayoutConsumer } from '@trend/layout';

Layout Provider

Wrap a TREND application with the main provider near the top of the render tree.

import Layout from '@trend/layout';

function App() {
  return <Layout>
    {...}
  </Layout>
}

withLayoutConsumer

Use withLayoutConsumer higher-order component to gain access to layout state.

import { withLayoutConsumer } from '@trend/layout';

function Button({ layout, ...props }) {
  return <button onClick={layout.toggleDrawer} type="button">
    Menu button
  </button>
}

export default withLayoutConsumer(Button);

Layout Prop

The consumer will pass in a layout object as a prop to the wrapped component from the withLayoutConsumer higher-order component.

Prop	Type	Description
hasActiveDrawer	Boolean	Maintains the current state of Drawer.
toggleDrawer	Function	Toggles the state of hasActiveDrawer.
hideDrawer	Function	Turns off hasActiveDrawer.
showDrawer	Function	Turns on hasActiveDrawer.

Example

import { OverlayDrawer as Drawer } from '@trend/drawer';
import Topbar from '@trend/topbar';
import Layout, { withLayoutConsumer } from '@trend/layout';

function Button({ layout, ...props }) {
  return <button onClick={layout.toggleDrawer} type="button">
    Menu button
  </button>
}

const EnhancedButton = withLayoutConsumer(Button);

function AppDrawer({ layout }) {
  return <Drawer open={layout.hasActiveDrawer} onToggle={layout.toggleDrawer}>
   {api => (...)}
  </Drawer>
}

const EnhancedDrawer = withLayoutConsumer(AppDrawer);

function App() {
  return <Layout>
    <Topbar fixed>
      {api => (
        <EnhancedMenuButton {...api.getIconProps()} />
      )}
    </Topbar>
    <EnhancedDrawer />
  </Layout>;
}