# @rmwc/drawer

> RMWC Drawer component

Latest version **14.3.5** (published 2024-10-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rmwc/drawer
pnpm add @rmwc/drawer
yarn add @rmwc/drawer
bun add @rmwc/drawer
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 14.3.5 |
| Published | 2024-10-24 |
| First published | 2018-09-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 18.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1657 |
| Author | rmwc |
| Maintainers | jamesmfriedman |
| Keywords | rmwc |

## Links

- npm: https://www.npmjs.com/package/@rmwc/drawer
- Repository: https://github.com/rmwc/rmwc
- Homepage: https://github.com/rmwc/rmwc/tree/master/packages/drawer
- Issues: https://github.com/rmwc/rmwc/issues
- npm.io page: https://npm.io/package/@rmwc/drawer

## Dependencies (3)

- [@rmwc/base](https://npm.io/package/@rmwc/base.md) 14.3.5
- [@rmwc/types](https://npm.io/package/@rmwc/types.md) 14.3.5
- [@material/drawer](https://npm.io/package/@material/drawer.md) ^14.0.0

## Recent versions

- 14.3.5 (latest) — 2024-10-24
- 14.0.2-alpha.7 (next) — 2023-10-30
- 14.3.4 — 2024-09-25
- 14.3.3 — 2024-08-30
- 14.3.2 — 2024-08-19
- 14.3.1 — 2024-07-19
- 14.3.0 — 2024-07-18
- 14.2.9 — 2024-07-03
- 14.2.8 — 2024-07-01
- 14.2.7 — 2024-06-30
- 14.2.6 — 2024-06-28
- 14.2.5 — 2024-06-26
- 14.2.2 — 2024-04-24
- 14.2.1 — 2024-04-17
- 14.2.0 — 2024-04-17
- … 155 more at https://npm.io/package/@rmwc/drawer/versions

## README

# Drawers

A navigation drawer slides in from the left and contains the navigation destinations for your app.

- Module **@rmwc/drawer**
- Import styles:
  - Using CSS Loader
    - import '@rmwc/drawer/styles';
  - Or include stylesheets
    - **'@material/drawer/dist/mdc.drawer.css'**
- MDC Docs: [https://material.io/develop/web/components/drawers/](https://material.io/develop/web/components/drawers/)

## Permanent

These are drawers that are permanently fixed inside of a view.

```jsx
<Drawer>
  <DrawerHeader>
    <DrawerTitle>DrawerHeader</DrawerTitle>
    <DrawerSubtitle>Subtitle</DrawerSubtitle>
  </DrawerHeader>
  <DrawerContent>
    <List>
      <ListItem>Cookies</ListItem>
      <ListItem>Pizza</ListItem>
      <ListItem>Icecream</ListItem>
    </List>
  </DrawerContent>
</Drawer>
```

## Dismissible

These are drawers that can be toggled to an open or closed state inside of a view, but still takes up viewable space when closed.

```jsx
function Example() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <div style={{ overflow: 'hidden', position: 'relative' }}>
        <Drawer dismissible open={open}>
          <DrawerHeader>
            <DrawerTitle>DrawerHeader</DrawerTitle>
            <DrawerSubtitle>Subtitle</DrawerSubtitle>
          </DrawerHeader>
          <DrawerContent>
            <List>
              <ListItem>Cookies</ListItem>
              <ListItem>Pizza</ListItem>
              <ListItem>Icecream</ListItem>
            </List>
          </DrawerContent>
        </Drawer>

        {/* Optional DrawerAppContent */}
        <DrawerAppContent
          style={{ minHeight: '15rem', padding: '1rem' }}
        >
          DrawerAppContent is an optional component that will resize
          content when the dismissible drawer is open and closed. It
          must be placed directly after the Drawer component.
        </DrawerAppContent>
      </div>

      <div style={{ textAlign: 'center' }}>
        <Button onClick={() => setOpen(!open)} raised>
          Toggle Dismissible
        </Button>
      </div>
    </>
  );
}
```

## Modal

These are drawers that can be temporarily displayed fixed on the side of the entire viewport.

```jsx
function Example() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <Drawer modal open={open} onClose={() => setOpen(false)}>
        <DrawerHeader>
          <DrawerTitle>DrawerHeader</DrawerTitle>
          <DrawerSubtitle>Subtitle</DrawerSubtitle>
        </DrawerHeader>
        <DrawerContent>
          <List>
            <ListItem>Cookies</ListItem>
            <ListItem>Pizza</ListItem>
            <ListItem>Icecream</ListItem>
          </List>
        </DrawerContent>
      </Drawer>

      <Button onClick={() => setOpen(!open)} raised>
        Toggle Modal
      </Button>
    </>
  );
}
```

## Right Side Drawers

`material-components-web` doesn't directly support right hand drawers, but it respects the `dir` attribute on DOM elements. This simple hack will allow you to get drawers that appear from the right hand side of your app. As an aside, the `dir` attribute can be used to invert many other behaviors where the element is anchored on the left.

```jsx
function Example() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      {/** Make the drawer appear right-to-left */}
      <Drawer
        dir="rtl"
        modal
        open={open}
        onClose={() => setOpen(false)}
      >
        {/** Set the content back to left-to-right */}
        <DrawerHeader dir="ltr">
          <DrawerTitle>Right Drawer</DrawerTitle>
          <DrawerSubtitle>Subtitle</DrawerSubtitle>
        </DrawerHeader>

        <DrawerContent dir="ltr">
          <List>
            <ListItem>Cookies</ListItem>
            <ListItem>Pizza</ListItem>
            <ListItem>Icecream</ListItem>
          </List>
        </DrawerContent>
      </Drawer>

      <Button onClick={() => setOpen(!open)} raised>
        Toggle Right Drawer
      </Button>
    </>
  );
}
```

## Drawer
A Drawer component.

### Props

| Name | Type | Description |
|------|------|-------------|
| `dismissible` | `boolean` | Makes a dismissible drawer. |
| `foundationRef` | `Ref<MDCModalDrawerFoundation<> \| MDCDismissibleDrawerFoundation<>>` | Advanced: A reference to the MDCFoundation. |
| `modal` | `boolean` | Makes a modal / temporary drawer. |
| `onClose` | `(evt: DrawerOnOpenEventT) => void` | Callback that fires when the Drawer is closed. |
| `onOpen` | `(evt: DrawerOnCloseEventT) => void` | Callback that fires when the Drawer is opened. |
| `open` | `boolean` | Opens or closes the Drawer. |


## DrawerHeader
An optional header for the Drawer.



## DrawerTitle
An title for the DrawerHeader.



## DrawerSubtitle
A subtitle for the DrawerHeader.



## DrawerContent
Content for Drawers.



## DrawerAppContent
For the Dismissible variant only. Sibling element that is resized when the drawer opens/closes.

---
_Source: https://npm.io/package/@rmwc/drawer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._