Nectar of the Programming Masses

    @material/react-drawer
    TypeScript icon, indicating that this package has built-in type declarations

    0.15.0 • Public • Published

    React Drawer

    A React version of an MDC Drawer.

    Installation

    npm install @material/react-drawer
    

    Usage

    Styles

    with Sass:

    import '@material/react-drawer/index.scss';

    with CSS:

    import "@material/react-drawer/dist/drawer.css";

    Javascript Instantiation

    Basic Usage

    Below is the basic example of a drawer. <SomeDrawerContent /> is not defined, but can be any element. Guidelines state it should be navigational content. Typically it is a list.

    import React, {Component} from 'react';
    import Drawer from '@material/react-drawer';
     
    class MyApp extends Component {
      render() {
        return (
          <Drawer>
            <SomeDrawerContent />
          </Drawer>
        );
      }
    }

    Header and Content Variant

    You may want to include a header, which MDC Web has already styled for you. For convenience, we've included <DrawerHeader />, <DrawerSubtitle />, <DrawerTitle />, and <DrawerContent /> components. DrawerHeader and DrawerContent default to a <div> tag, while the DrawerTitle and DrawerSubtitle default to an h3 and h6 tag respectively, but can be customized with the tag prop (example shown below).

    import React, {Component} from 'react';
    import Drawer, {
      DrawerHeader,
      DrawerSubtitle,
      DrawerTitle,
      DrawerContent,
    } from '@material/react-drawer';
     
    class MyApp extends Component {
      render() {
        return (
          <Drawer>
            <DrawerHeader> {/*defaults to div*/}
              <DrawerTitle tag='h2'> {/*defaults to h3*/}
                Inbox
              </DrawerTitle>
              <DrawerSubtitle> {/*defaults to h6*/}
                matt@email.com
              </DrawerSubtitle>
            </DrawerHeader>
     
            <DrawerContent tag='main'>  {/*defaults to div*/}
              <SomeDrawerContent />
            </DrawerContent>
          </Drawer>
        );
      }
    }

    Dismissible Variant

    The 2 previous examples are both permanent drawer examples, which are stationary. If you have a smaller screen, or want to keep focus on your main content you may want to use a dismissible drawer. The dismissible drawer will expand and collapse based on the open prop.

    You will also want to use the <DrawerAppContent /> component, which will wrap around your content, that should animate in/out with the dismissible drawer.

    import React, {Component} from 'react';
    import Drawer, {DrawerAppContent} from '@material/react-drawer';
     
    class MyApp extends Component {
      state = {open: false};
     
      render() {
        return (
          <div>
            <Drawer
              dismissible
              open={this.state.open}
            >
              <SomeDrawerContent />
            </Drawer>
            <DrawerAppContent>
              Your really cool app content here
              <button onClick={() => this.setState({open: !this.state.open})}>
                {this.state.open ? 'Open' : 'Close'} Drawer
              </button>
            </DrawerAppContent>
          </div>
        );
      }
    }

    Usage with Top App Bar

    Full height drawer

    If you want the dismissible drawer or permanent drawer to appear to the side of the top app bar (take the full height of the screen) as shown in the below image, please follow this markup:

    adjacent

    import React, {Component} from 'react';
    import TopAppBar, {TopAppBarFixedAdjust} from '@material/react-top-app-bar';
    import Drawer, {DrawerAppContent, DrawerContent, DrawerHeader, DrawerTitle} from '@material/react-drawer';
    import MaterialIcon from '@material/react-material-icon';
    import List, {ListItem, ListItemGraphic, ListItemText} from '@material/react-list';
     
    // includes imports for drawer, list, material icon and top app bar styles
    import './App.scss';
     
    export default class App extends Component {
      state = {selectedIndex: 0};
     
      render() {
        return (
          <div className='drawer-container'>
            <Drawer>
              <DrawerHeader>
                <DrawerTitle tag='h2'>
                  jane.smith@gmail.com
                </DrawerTitle>
              </DrawerHeader>
     
              <DrawerContent>
                <List singleSelection selectedIndex={this.state.selectedIndex}>
                  <ListItem>
                    <ListItemGraphic graphic={<MaterialIcon icon='folder'/>} />
                    <ListItemText primaryText='Mail' />
                  </ListItem>
                </List>
              </DrawerContent>
            </Drawer>
     
            <DrawerAppContent className='drawer-app-content'>
              <TopAppBar
                title='Inbox'
                navigationIcon={<MaterialIcon icon='menu' />}
              />
     
              <TopAppBarFixedAdjust>
                Your inbox content
              </TopAppBarFixedAdjust>
            </DrawerAppContent>
          </div>
        );
      }
    }
     

    You will also need these styles:

     
    .drawer-container {
      display: flex;
      flex-direction: row;
      height: 100vh;
      overflow: hidden;
    }
     
    .drawer-app-content {
      flex: auto;
      overflow: auto;
    }
    Dismissible or Permanent drawer below top app bar

    If you want the dismissible drawer or permanent drawer to appear below the top app bar as shown in the below image, please follow this markup:

    below

    import React, {Component} from 'react';
    import TopAppBar, {TopAppBarFixedAdjust} from '@material/react-top-app-bar';
    import Drawer, {DrawerAppContent, DrawerContent, DrawerHeader, DrawerTitle} from '@material/react-drawer';
    import MaterialIcon from '@material/react-material-icon';
    import List, {ListItem, ListItemGraphic, ListItemText} from '@material/react-list';
     
    // includes imports for drawer, list, material icon and top app bar styles
    import './App.scss';
     
    export default class App extends Component {
      state = {selectedIndex: 0};
     
      render() {
        return (
          <div className='drawer-container'>
            <TopAppBar title='Inbox'/>
     
            <TopAppBarFixedAdjust className='top-app-bar-fix-adjust'>
              <Drawer>
                <DrawerHeader>
                  <DrawerTitle tag='h2'>
                    jane.smith@gmail.com
                  </DrawerTitle>
                </DrawerHeader>
     
                <DrawerContent>
                  <List singleSelection selectedIndex={this.state.selectedIndex}>
                    <ListItem>
                      <ListItemGraphic graphic={<MaterialIcon icon='folder'/>} />
                      <ListItemText primaryText='Mail' />
                    </ListItem>
                  </List>
                </DrawerContent>
              </Drawer>
     
              <DrawerAppContent className='drawer-app-content'>
                Your inbox content
              </DrawerAppContent>
            </TopAppBarFixedAdjust>
          </div>
        );
      }
    }
     

    You will also need these styles:

    .drawer-container {
      display: flex;
      flex-direction: row;
      height: 100vh;
      overflow: hidden;
    }
     
    .drawer-app-content {
      flex: auto;
      overflow: auto;
    }
     
    .top-app-bar-fix-adjust {
      display: flex;
      width: 100%;
    }

    There is a known issue with the dismissible drawer styles when putting the drawer below the top app bar. To get around this, you must update the .mdc-drawer--dismissible class in your CSS stylesheets.

    .mdc-drawer--dismissible {
      top: auto;
    }

    NOTE: Ordering of the markup is imperative.

    Modal Variant

    If you are on a smaller screen and do not want to animation your content, you may want to use the modal drawer. The modal drawer will expand and collapse based on the open prop overlayed your application content.

    You should also implement the onClose callback prop, which is triggered after the drawer closes. This is your opportunity to set the open state variable to false.

    NOTE: Closes with esc key or scrim click.

    import React, {Component} from 'react';
    import Drawer, {DrawerAppContent} from '@material/react-drawer';
     
    class MyApp extends Component {
      state = {open: false};
     
      render() {
        return (
          <div>
            <Drawer
              modal
              open={this.state.open}
              onClose={() => this.setState({open: false})}
            >
              <SomeDrawerContent />
            </Drawer>
            <div>
              Your really cool app content here
              <button onClick={() => this.setState({open: !this.state.open})}>
                {this.state.open ? 'Open' : 'Close'} Drawer
              </button>
            </div>
          </div>
        );
      }
    }

    Accessibility

    Focus Management

    It is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC React Drawer restores focus to the menu button which opened it.)

    NOTE: There is also a known bug due to the use of . There must be a focusable item in your drawer when using the modal variant. For now, insert an empty <a /> into your drawer as a workaround.

    Dismissible Drawer

    Restore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.

    import React, {Component} from 'react';
    import Drawer from '@material/react-drawer';
    import Button from '@material/react-button';
     
    class Drawer extends Component {
      mainContentEl = React.createRef();
     
      focusFirstFocusableItem = () => {
        this.mainContentEl.current.querySelector('input, button').focus();
      }
     
      onDrawerClose = () => {
        this.setState({open: false});
        this.focusFirstFocusableItem();
      }
     
      render() {
     
        return (
          <div>
            <Drawer
              modal
              open={this.state.open}
              onClose={this.drawerOnClose}
            >
              <List>
                <ListItem onClick={this.focusFirstFocusableItem}>
                  <ListItemText primaryText='list item' />
                </ListItem>
              </List>
            </Drawer>
            <div ref={this.mainContentEl}>
              <Button raised>Click me!</Button>
            </div>
          </div>
        );
      }
    }

    Modal Drawer

    Close the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.

    import React, {Component} from 'react';
    import Drawer from '@material/react-drawer';
    import Button from '@material/react-button';
     
    class Drawer extends Component {
      mainContentEl = React.createRef();
     
      onDrawerClose = () => {
        this.setState({open: false});
        this.mainContentEl.current.querySelector('input, button').focus();
      }
     
      onListItemClick = () => this.onDrawerClose();
     
      render() {
     
        return (
          <div>
            <Drawer
              modal
              open={this.state.open}
              onClose={this.drawerOnClose}
            >
              <List>
                <ListItem onClick={this.onListItemClick}>
                  <ListItemText primaryText='list item' />
                </ListItem>
              </List>
            </Drawer>
            <div ref={this.mainContentEl}>
              <Button raised>Click me!</Button>
            </div>
          </div>
        );
      }
    }

    Props

    Drawer

    Prop Name Type Description
    className String Classes to be applied to the drawer element.
    onOpen Function() => void Callback after the drawer has opened.
    onClose Function() => void Callback after the drawer has closed.
    modal Boolean Indicates that the drawer is of type modal.
    dismissible Boolean Indicates that the drawer is of type dismissible.
    tag String Customizes the drawer tag type (default to <aside>).
    open boolean If true, opens drawer. If false, closes drawer.
    innerRef RefObject Root drawer element ref.

    Sass Mixins

    Sass mixins may be available to customize various aspects of the Components. Please refer to the MDC Web repository for more information on what mixins are available, and how to use them.

    Advanced Sass Mixins

    Install

    npm i @material/react-drawer

    DownloadsWeekly Downloads

    1,784

    Version

    0.15.0

    License

    MIT

    Unpacked Size

    281 kB

    Total Files

    25

    Last publish

    Collaborators

    • yefim
    • abhiomkar
    • azakus
    • bicknellr
    • material-admin
    • aprigogin
    • patrickrodee
    • aomarks
    • emarquez
    • allanchen
    • esgonzalez
    • asyncliz
    • candysonya
    • ssuarez
    • taylorv