Drawer

Documentation for the <Drawer /> component. Learn about the available props and how to use it.

Installation#

To get started, install @exponentialeducation/betomic via yarn:

# Yarn

yarn add @exponentialeducation/betomic

Basic Example#

A Drawer is a panel that is typically overlaid on top of a page.

{/* ... */}

import { Drawer } from '@exponentialeducation/betomic';

function IndexPage() {
  const [open, setOpen] = useState<boolean>(false);
  return (
    <main>
      {/* ... */}

      <Drawer
        open={open}
        onClose={() => setOpen(false)}
      >
        <p>...</p>
        <p>...</p>
      </Drawer>

      {/* ... */}
    </main>
  )
}

Placements#

Three placements are available.

{/* ... */}

import { Drawer } from '@exponentialeducation/betomic';

function IndexPage() {
  return (
    <main>
      {/* ... */}

      <Drawer
        position="right"
        open={open}
        onClose={() => setOpen(false)}
      >
        <p>...</p>
        <p>...</p>
      </Drawer>

      {/* ... */}
    </main>
  )
}

Props#