Skip to content
Sancho UI
Toggle dark mode
Getting started
Built with ☕ by
Ben McMahen

Sheet

The Sheet component is useful for displaying app-based navigation, supplemental information, or (on mobile devices) menu options. Generally sheets should not be tied to specific URLs. The Sheet component has full gesture support, which means you can pull it to trigger its closure as is common in native applications.

Basic usage

By default, a sheet will open to the right with its width adjusting to the width of the content. Use the data-trigger-close="true" attribute on any element that should trigger the sheet to close.

Open sheet
/** @jsx jsx */

function SheetExample() {
  const [open, setOpen] = React.useState(false);
  const theme = useTheme();

  return (
    <React.Fragment>
      <Button onPress={() => setOpen(true)}>Open sheet</Button>
      <Sheet onRequestClose={() => setOpen(false)} isOpen={open}>
        <div tabIndex={0} css={{ padding: theme.spaces.md }}>
          <Text>Hello world</Text>
        </div>
      </Sheet>
    </React.Fragment>
  );
}

Different positions

You can display sheets from the left, top, bottom, or right.

left
top
bottom
right
/** @jsx jsx */

function CollapseExample() {
  const [show, setShow] = React.useState(false);
  const [position, setPosition] = React.useState("left");
  const theme = useTheme();

  return (
    <React.Fragment>
      {["left", "top", "bottom", "right"].map(pos => (
        <Button
          css={{ margin: theme.spaces.md }}
          key={pos}
          onPress={() => {
            setPosition(pos);
            setShow(true);
          }}
        >
          {pos}
        </Button>
      ))}

      {["left", "top", "bottom", "right"].map(pos => (
        <Sheet
          position={pos}
          onRequestClose={() => setShow(false)}
          isOpen={show && pos === position}
        >
          <div css={{ padding: theme.spaces.lg }}>
            <Text>Hello world</Text>
          </div>
        </Sheet>
      ))}
    </React.Fragment>
  );
}

API

getDirection
Sheet
isOpen*boolean
Whether the sheet is visible
onRequestClose*() => void
A callback to handle closing the sheet
rolestring
position*SheetPositions
The position of the sheet. 'left' is typically used for navigation, 'right' for additional information, 'bottom' for responsive modal popovers.
animationConfigSpringConfig
spring animation configuration