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

Dialog

A dialog is useful for displaying infomation that commands the user's attention.

Sancho exports these components to create dialogs:

  • Dialog: Your basic dialog which includes a DialogHeader if provided a title.
  • DialogHeader: A standard header of a dialog, which includes a title and a close button.

Basic usage

View dialog
<Component initialState={{ isOpen: false }}>
  {({ state, setState }) => (
    <React.Fragment>
      <Button onPress={() => setState({ isOpen: true })}>View dialog</Button>
      <Dialog
        isOpen={state.isOpen}
        onRequestClose={() => setState({ isOpen: false })}
        title="Dialog title"
      >
        <div className="Dialog-example">
          <Text>Dialog content</Text>
          <div>
            <Button intent="primary">Save</Button>
          </div>
        </div>
      </Dialog>
    </React.Fragment>
  )}
</Component>

Fullscreen mobile example

This option enables fullscreen on mobile devices, which is typically a better user experience.

Show Dialog
<Component initialState={{ isOpen: false }}>
  {({ state, setState }) => (
    <React.Fragment>
      <Button onPress={() => setState({ isOpen: true })}>Show Dialog</Button>
      <Dialog
        isOpen={state.isOpen}
        mobileFullscreen
        onRequestClose={() => setState({ isOpen: false })}
        title="Hello world!"
      >
        <div className="Dialog-example">
          <Text>Hello world</Text>
        </div>
      </Dialog>
    </React.Fragment>
  )}
</Component>

Without a title

When a title isn't provided, a header isn't added.

Show Dialog
<Component initialState={{ isOpen: false }}>
  {({ state, setState }) => (
    <React.Fragment>
      <Button onPress={() => setState({ isOpen: true })}>Show Dialog</Button>
      <Dialog
        isOpen={state.isOpen}
        onRequestClose={() => setState({ isOpen: false })}
      >
        <div className="Dialog-example">
          <Text>Hello world</Text>
          <Button onPress={() => setState({ isOpen: false })}>Cancel</Button>
        </div>
      </Dialog>
    </React.Fragment>
  )}
</Component>

API

Dialog
isOpen*boolean
Whether the dialog is showing
titlestring
An optional title. If set, a header will be added to your dialog.
mobileFullscreenboolean
Fill the entire screen on mobile devices
onRequestClose*() => void
A callback for closing the dialog.
children*ReactNode
The contents of the dialog
cssInterpolationWithTheme<any>
DialogHeader
title*string
The title of the header
onRequestClose() => void
An optional callback for closing the dialog. If set, a close button will be added to the header
cssInterpolationWithTheme<any>