Drawer

Introduction

Drawers overlay content over existing parts of the UI and are anchored to the edge of the screen.

Examples

Edit code

Usage

Drawer

Drawer is a stateless React component controlled by the isOpen prop. Below a component uses it's state to control the Drawer.

1import React from "react";
2import { Drawer } from "@commure/components-foundation";
3import { Button } from "@commure/components-foundation";
4
5class MyDrawer extends React.Component {
6  constructor() {
7    this.state = {
8      isOpen: false
9    };
10    this.closeAlert = this.closeAlert.bind(this);
11    this.openAlert = this.openAlert.bind(this);
12  }
13
14  closeAlert() {
15    this.setState({
16      isOpen: false
17    });
18  }
19
20  openAlert() {
21    this.setState({
22      isOpen: true
23    });
24  }
25
26  render() {
27    return (
28      <div>
29        <Button onClick={this.openAlert}>Show Drawer</Button>
30        <Drawer
31          isOpen={this.state.isOpen}
32          onClose={this.closeAlert}
33          title="testing"
34        >
35          <div className={Classes.DRAWER_BODY}>
36            <div className={Classes.DIALOG_BODY}>This is a drawer</div>
37          </div>
38          <div className={Classes.DRAWER_FOOTER}> </div>
39        </Drawer>
40      </div>
41    );
42  }
43}
44
45export default MyDrawer;

API Reference

Drawer

Prop Name	Required?	Type	Description
autoFocus	false	boolean	Whether the overlay should acquire application focus when it first opens.
backdropClassName	false	string	CSS class names to apply to backdrop element.
backdropProps	false	HTMLProps<HTMLDivElement>	HTML props for the backdrop element.
canEscapeKeyClose	false	boolean	Whether pressing the `esc` key should invoke `onClose`.
canOutsideClickClose	false	boolean	Whether clicking outside the overlay element (either on backdrop when present or on document) should invoke `onClose`.
className	false	string	A space-delimited list of class names to pass along to a child element.
enforceFocus	false	boolean	Whether the overlay should prevent focus from leaving itself. That is, if the user attempts to focus an element outside the overlay and this prop is enabled, then the overlay will immediately bring focus back to itself. If you are nesting overlay components, either disable this prop on the "outermost" overlays or mark the nested ones `usePortal={false}`.
hasBackdrop	false	boolean	Whether a container-spanning backdrop element should be rendered behind the contents.
icon	false	IconName | MaybeElement	Name of a Blueprint UI icon (or an icon element) to render in the drawer's header. Note that the header will only be rendered if `title` is provided.
isCloseButtonShown	false	boolean	Whether to show the close button in the dialog's header. Note that the header will only be rendered if `title` is provided.
isOpen	true	boolean	Toggles the visibility of the overlay and its children. This prop is required because the component is controlled.
lazy	false	boolean	If `true` and `usePortal={true}`, the `Portal` containing the children is created and attached to the DOM when the overlay is opened for the first time; otherwise this happens when the component mounts. Lazy mounting provides noticeable performance improvements if you have lots of overlays at once, such as on each row of a table.
onClose	false	(event?: SyntheticEvent<HTMLElement>) => void	A callback that is invoked when user interaction causes the overlay to close, such as clicking on the overlay or pressing the `esc` key (if enabled). Receives the event from the user's interaction, if there was an event (generally either a mouse or key event). Note that, since this component is controlled by the `isOpen` prop, it will not actually close itself until that prop becomes `false`.
onClosed	false	(node: HTMLElement) => void	Lifecycle method invoked just after the CSS _close_ transition ends but before the child has been removed from the DOM. Receives the DOM element of the child being closed.
onClosing	false	(node: HTMLElement) => void	Lifecycle method invoked just before the CSS _close_ transition begins on a child. Receives the DOM element of the child being closed.
onOpened	false	(node: HTMLElement) => void	Lifecycle method invoked just after the CSS _open_ transition ends. Receives the DOM element of the child being opened.
onOpening	false	(node: HTMLElement) => void	Lifecycle method invoked just after mounting the child in the DOM but just before the CSS _open_ transition begins. Receives the DOM element of the child being opened.
portalClassName	false	string	Space-delimited string of class names applied to the `Portal` element if `usePortal={true}`.
portalContainer	false	HTMLElement	The container element into which the overlay renders its contents, when `usePortal` is `true`. This prop is ignored if `usePortal` is `false`.
position	false	Position	Position of a drawer. All angled positions will be casted into pure positions (TOP, BOTTOM, LEFT or RIGHT).
size	false	number | string	CSS size of the drawer. This sets `width` if `vertical={false}` (default) and `height` otherwise. Constants are available for common sizes: - `Drawer.SIZE_SMALL = 360px` - `Drawer.SIZE_STANDARD = 50%` - `Drawer.SIZE_LARGE = 90%`
style	false	CSSProperties	CSS styles to apply to the dialog.
title	false	React.ReactNode	Title of the dialog. If provided, an element with `Classes.DIALOG_HEADER` will be rendered inside the dialog before any children elements.
transitionDuration	false	number	Indicates how long (in milliseconds) the overlay's enter/leave transition takes. This is used by React `CSSTransition` to know when a transition completes and must match the duration of the animation in CSS. Only set this prop if you override Blueprint's default transitions with new transitions of a different length.
transitionName	false	string	Name of the transition for internal `CSSTransition`. Providing your own name here will require defining new CSS transition properties.
usePortal	false	boolean	Whether the overlay should be wrapped in a `Portal`, which renders its contents in a new element attached to `portalContainer` prop. This prop essentially determines which element is covered by the backdrop: if `false`, then only its parent is covered; otherwise, the entire page is covered (because the parent of the `Portal` is the `<body>` itself). Set this prop to `false` on nested overlays (such as `Dialog` or `Popover`) to ensure that they are rendered above their parents.
vertical	false	boolean	Whether the drawer should appear with vertical styling. It will be ignored if `position` prop is set

Related Reading

Blueprint Reference