@clipmx/drawer NPM

Clip Button

Wrapper of MuiDrawer that adds the optional funciontality of rendering a MuiList through the items prop. Each item could have the followint properties:

label (required): Rendered using a ListItemText component, should be unique.
icon (optional): Rendered using a ListItemIcon component, you must provide an Icon or SvgIcon node.
divider (optional): Mandates to render a Divider, use 'above'|'below' to specify where to render it.
action (optional): A function which is called with the item clicked, if you return false, the item won't be marked as active.

You can style each element of the rendered list using the following classes (use withStyles from mui to set them):

listItemRoot: Styles for the root class of the ListItem component.
activeListItemRoot: Styles for the root class of the ListItem component when active.
listItemIconRoot: Styles for the root class of the ListItemIcon component.
activeListItemIconRoot: Styles for the root class of the ListItemIcon component when active.
listItemTextRoot: Styles for the root class of the ListItemText component.
activeListItemTextRoot: Styles for the root class of the ListItemText component when active.
listItemTextPrimary: Styles for the primary class of the ListItemText component.
activeListItemTextPrimary: Styles for the primary class of the ListItemText component when active.

To specify a general action for when items are clicked, you can use the itemsAction prop, which will receive the item been clicked, this function won't be executed when clicking an item for which you provided an action callback and like with that other funciton, if you return false, then the item won't be marked as active.

To specify the initial active item, you can pass the activeItem prop, specifying the index of it or the label of the item.

If you don't want to use this auto items rendering, you can still provide the children of the Drawer, as if you where using the normal MuiDrawer, if you provide both the children and items props, the List (items) component will be rendered as the first child of the drawer.

Installation

npm install @clipmx/drawer --save

Usage

import React from 'react';
import ResponsiveDrawer from '@clipmx/drawer';

const drawerItems = [
  {
    name: 'First item',
    icon: <FirstItemIcon />,
    linkPath: '/go/to/firstItemPath',
  },
  {
    name: 'Second item',
    icon: <SecondItemIcon />,
    linkPath: '/go/to/secondItemPath',
  },
  {
    name: 'Third item',
    icon: <ThirdItemIcon />,
    linkPath: '/go/to/thirdItemPath',
  },
];
const MyComponent = () => (
  <div>
    <Drawer items={drawerItems} />
  </div>
);

export default MyComponent;