Documentation
Components
Drawer

Drawer

An interactive element fixed to the edge of the screen.

Usage

First of all, you need to import the Drawer component from the kitchn package.

import { Drawer } from "kitchn"

Default

Code Editor
() => {
  const [active, setActive] = React.useState(false);
  return (
    <Container>
      <Button size={"normal"} onClick={() => setActive(!active)}>
        Open Drawer
      </Button>
      <Drawer show={active} onDismiss={() => setActive(false)}>
        <Container align="center" gap={10} style={{ padding: 20 }}>
          <Text size={"title"} weight={"bold"}>
            Drawer
          </Text>
          <Text>
            Drawers should be reserved for small viewports. Use a Modal on
            large viewports.
          </Text>
        </Container>
      </Drawer>
    </Container>
  );
}

Custom height

Code Editor
() => {
  const [active, setActive] = React.useState(false);
  return (
    <Container>
      <Button size={"normal"} onClick={() => setActive(!active)}>
        Open Drawer (with callback)
      </Button>
      <Drawer show={active} onDismiss={() => setActive(false)} height={300}>
        <Container align="center" gap={10} style={{ padding: 20 }}>
          <Text size={"title"} weight={"bold"}>
            Drawer
          </Text>
          <Text>
            Drawers should be reserved for small viewports. Use a Modal on
            large viewports.
          </Text>
        </Container>
      </Drawer>
    </Container>
  );
}

Callback

Code Editor
() => {
  const [active, setActive] = React.useState(false);
  return (
    <Container>
      <Button size={"normal"} onClick={() => setActive(!active)}>
        Open Drawer (with callback)
      </Button>
      <Drawer
        show={active}
        onAnimationDone={() => setActive(false)}
        onDismiss={() => alert("Dismissed!")}
      >
        <Container align="center" gap={10} style={{ padding: 20 }}>
          <Text size={"title"} weight={"bold"}>
            Drawer
          </Text>
          <Text>
            Drawers should be reserved for small viewports. Use a Modal on
            large viewports.
          </Text>
        </Container>
      </Drawer>
    </Container>
  );
}

Props

NameTypeDefaultRequiredDescriptionAccepted values
showboolean-✅The current state of the drawer (shown or not).-
onDismiss() => void--The dismiss event handler of the modal.-
onAnimationDone() => void--The animation event handler.-
childrenReact.ReactNode---
heightnumber--The drawer's height.-
Last updated on
ComboboxDropdown