Skip Navigation
React Magma

Drawer

A container with a transition

Basic Usage

Drawer accepts a position (top, right, bottom, or left)

import React from 'react';


import {
  Button,
  Drawer,
  DrawerPosition,
  VisuallyHidden,
} from 'react-magma-dom';


export function Example() {
  const [showDrawer, setShowDrawer] = React.useState(false);
  const buttonRef = React.useRef<HTMLButtonElement>();


  return (
    <>
      <Drawer
        closeAriaLabel="Close drawer"
        header="Drawer Title"
        isOpen={showDrawer}
        onClose={() => {
          setShowDrawer(false);
          buttonRef.current.focus();
        }}
        position={DrawerPosition.bottom}
      >
        <p>This is a Drawer, doing Drawer things.</p>
        <p>
          <Button>This is a button</Button>
        </p>
      </Drawer>
      <Button onClick={() => setShowDrawer(true)} ref={buttonRef}>
        Show Drawer
        <VisuallyHidden>(opens drawer dialog)</VisuallyHidden>
      </Button>
    </>
  );
}


import React from 'react';


import {
  Button,
  Drawer,
  DrawerPosition,
  NavTab,
  NavTabs,
  TabsOrientation,
  VisuallyHidden,
} from 'react-magma-dom';


export function Example() {
  const [showDrawer, setShowDrawer] = React.useState(false);
  const buttonRef = React.useRef<HTMLButtonElement>();


  return (
    <>
      <Drawer
        ariaLabel="drawer"
        closeAriaLabel="Close drawer"
        isOpen={showDrawer}
        onClose={() => {
          setShowDrawer(false);
          buttonRef.current.focus();
        }}
        position={DrawerPosition.right}
      >
        <NavTabs orientation={TabsOrientation.vertical}>
          <NavTab to="#">One</NavTab>
          <NavTab to="#">Two</NavTab>
          <NavTab to="#">Three</NavTab>
          <NavTab to="#">Four</NavTab>
        </NavTabs>
      </Drawer>
      <Button onClick={() => setShowDrawer(true)} ref={buttonRef}>
        Show Drawer
        <VisuallyHidden>(opens drawer dialog)</VisuallyHidden>
      </Button>
    </>
  );
}

Inverse

import React from 'react';


import {
  Button,
  Drawer,
  DrawerPosition,
  VisuallyHidden,
  Card,
  CardBody,
} from 'react-magma-dom';


export function Example() {
  const [showDrawer, setShowDrawer] = React.useState(false);
  const buttonRef = React.useRef<HTMLButtonElement>();


  return (
    <Card isInverse>
      <CardBody>
        <Drawer
          closeAriaLabel="Close drawer"
          header="Drawer Title"
          isInverse
          isOpen={showDrawer}
          onClose={() => {
            setShowDrawer(false);
            buttonRef.current.focus();
          }}
          position={DrawerPosition.right}
        >
          <p>This is a Drawer, doing Drawer things.</p>
          <p>
            <Button isInverse>This is a button</Button>
          </p>
        </Drawer>
        <Button onClick={() => setShowDrawer(true)} ref={buttonRef} isInverse>
          Show Drawer
          <VisuallyHidden>(opens drawer dialog)</VisuallyHidden>
        </Button>
      </CardBody>
    </Card>
  );
}

Internationalization

If you're using strings in your component, they must be internationalized.

Full example of internationalization override options

import React from 'react';


import {
  Button,
  Drawer,
  DrawerPosition,
  VisuallyHidden,
  I18nContext,
  defaultI18n,
} from 'react-magma-dom';


export function Example() {
  const [showDrawer, setShowDrawer] = React.useState(false);
  const buttonRef = React.useRef<HTMLButtonElement>();


  return (
    <I18nContext.Provider
      value={{
        ...defaultI18n,
        modal: {
          closeAriaLabel: 'Cerrar',
        },
      }}
    >
      <Drawer
        header="Drawer Title"
        isOpen={showDrawer}
        onClose={() => {
          setShowDrawer(false);
          buttonRef.current.focus();
        }}
        position={DrawerPosition.bottom}
      >
        <p>override default i18n value:</p>
      </Drawer>
      <Button onClick={() => setShowDrawer(true)} ref={buttonRef}>
        Show Drawer
        <VisuallyHidden>(opens drawer dialog)</VisuallyHidden>
      </Button>
    </I18nContext.Provider>
  );
}

Drawer Props

Any other props supplied will be provided to the wrapping div element.

containerStyle

Description

Style properties for the drawer container

Type

CSSProperties

Default

-

drawerStyle

Description

Style properties for the drawer

Type

CSSProperties

Default

-

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

position

Description

Set the position of the drawer

Type

enum, one of:
DrawerPosition.bottom
DrawerPosition.left
DrawerPosition.right
DrawerPosition.top

Default

DrawerPosition.top

On this page

Deploys by Netlify