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
<Component initialState={{ isOpen: false }}>
  {({ state, setState }) => (
    <React.Fragment>
      <Button onPress={() => setState({ isOpen: true })}>Open sheet</Button>
      <Sheet
        onRequestClose={() => setState({ isOpen: false })}
        isOpen={state.isOpen}
      >
        <div tabIndex={0} style={{ padding: "3rem" }}>
          <Text>Hello world</Text>
        </div>
      </Sheet>
    </React.Fragment>
  )}
</Component>

Different positions

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

Left
<Component initialState={{ isOpen: false, position: "left" }}>
  {({ state, setState }) => (
    <React.Fragment>
      <Button onPress={() => setState({ isOpen: true, position: "left" })}>
        Left
      </Button>

      <Sheet
        position={state.position}
        onRequestClose={() => setState({ isOpen: false })}
        isOpen={state.isOpen}
      >
        <div style={{ padding: "3rem" }}>
          <Text>Hello world</Text>
        </div>
      </Sheet>
    </React.Fragment>
  )}
</Component>

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