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

Overlay

An overlay used by the Dialog component.

Basic usage

Add whatever you'd like to display over the Overlay as its children.

Open
<Component initialState={{ isOpen: false }}>
  {({ state, setState }) => (
    <React.Fragment>
      <Button onPress={() => setState({ isOpen: true })}>Open</Button>
      <Overlay
        isOpen={state.isOpen}
        onRequestClose={() => setState({ isOpen: false })}
      >
        <div>Click somewhere to close</div>
      </Overlay>
    </React.Fragment>
  )}
</Component>

API

Overlay
isOpen*boolean
Whether the overlay is open
children*ReactNode
Whatever you'd like to appear on top
onRequestClose*() => void
Callback to handle closing the overlay