Overlay

A conditional overlay component.
It respects the safe-area on iOS by adding extra padding.

It accepts all Box props except for extend.
It can't have padding.

Props

Name	Type	Default	Description
overflow	auto \| hidden \| scroll	auto
visible	bool		Sets the visiblity of the modal.
zIndex	number	10

Examples

Dark Mode

function Example() {
  const [visible, setVisible] = useScrollBlockingOverlay()

  return (
    <>
      <ActionButton onClick={() => setVisible(true)}>Open</ActionButton>
      <Overlay
        bg="grey100"
        top={0}
        right={0}
        left={0}
        bottom={0}
        zIndex={100}
        visible={visible}>
        <Box padding={10} alignSelf="center">
          <ActionButton onClick={() => setVisible(false)}>Close</ActionButton>
        </Box>
      </Overlay>
    </>
  )
}function Example() {
  const [visible, setVisible] = useScrollBlockingOverlay()

  return (
    <>
      <ActionButton onClick={() => setVisible(true)}>Open</ActionButton>
      <Overlay
        bg="grey100"
        top={0}
        right={0}
        left={0}
        bottom={0}
        zIndex={100}
        visible={visible}>
        <Box padding={10} alignSelf="center">
          <ActionButton onClick={() => setVisible(false)}>Close</ActionButton>
        </Box>
      </Overlay>
    </>
  )
}