Drawer

React off-canvas menu region that can contain a title, sub-title, and a self-contained inner scrollable area.

• Installation
• Basic Usage
• Drawer
• Drawer Overlay
• Drawer api

Installation

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

Basic Usage

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

Default Drawer

// Using ES6 modules.
import React from 'react';
import Drawer from '@trend/drawer';

const {
  getRootProps,
  getHdProps,
  getTitleProps,
  getSubtitleProps,
  getInnerProps
} = Drawer.api();

function Aside({ children }) {
  return <Drawer>
    <div {...getRootProps()}>
      <div {...getHdProps()}>
        <h1 {...getTitleProps()}>Drawer Title</h1>
        <h2 {...getSubtitleProps()}>Drawer SubTitle</h2>
      </div>
      <div {...getInnerProps({ className: 'tc-phb'})}>
        Inner Drawer area
      </div>
    </div>
  </Drawer>;
}

// or pass children as a function

function AsideChildFunction({ children }) {
  return <Drawer>
    { api => (
      <div {...api.getRootProps()}>
        <div {...api.getHdProps()}>
          <h1 {...api/getTitleProps()}>Drawer Title</h1>
          <h2 {...api.getSubtitleProps()}>Drawer SubTitle</h2>
        </div>
        <div {...api.getInnerProps({ className: 'tc-phb'})}>
          Inner Drawer area
        </div>
      </div>
    )}
  </Drawer>;
}

Methods

API (static)

Returns an object of prop-getters for various sub-components to build out. See api table for getters.

Drawer Overlay

This is a controlled component, use the open prop to adjust the visibility of the drawer.

// Using ES6 modules.
import React from 'react';
import { DrawerOverlay as Drawer } from '@trend/drawer';

function Aside({ open, toggleDrawer }) {
  return <Drawer open={open} onToggle={toggleDrawer}>
    { api => (
      <Fragment>
        <div {...api.getHdProps()}>
          <h1 {...api.getTitleProps()}>Title</h1>
          <h2 {...api.getSubtitleProps()}>SubTitle</h2>
        </div>
        <div {...api.getInnerProps({className: 'tc-phb'})}>
          <a className="tc-display-block"
            href="#"
            onClick={this.onLinkClick}>
            link 1
          </a>
          <a className="tc-display-block"
            href="#"
            onClick={this.onLinkClick}>
            link 2
          </a>
          <button className="tc-display-block"
            onClick={this.toggleDrawer}>
            link 3
          </button>
        </div>
      </Fragment>
    )}
    </Drawer>;
}

NOTE Drawer overaly will automatically generate the root element, unlike the default Drawer component where the developer is responsible for implementing the root node. The default HTML tag is a div, pass in a tag prop to change the default.

Props:

hasMask

boolean | optional, true

Render a mask under the drawer above the content when opened.

onToggle

function | optional, noop

Function that gets called on clicks to the mask or areas outside of a drawer while opened.

open

boolean | required, false

The prop that will toggle the display of the drawer.

API

This API is the same for both the default and overlay drawer types.

Property | Category | Type | Description --- | --- | --- | --- getRootProps | prop getter | function(props: object) | Returns props to the root node Only available for default Drawer. getHdProps | prop getter | function(props: object) | Returns props for the header sub-component. getTitleProps | prop getter | function(props: object) | Returns props for the drawer title. getSubtitleProps | prop getter | function(props: object) | Returns props for the drawer subtitle. getInnerProps | prop getter | function(props: object) | Returns props for the drawer inner sub-component.