@trend/layout v0.5.0

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.

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>;
}