Dialog

Usage

import { Button, Dialog, useDialog, SubmitRow } from 'matterial'

function DialogExample() {
  const { active, open, close } = useDialog(false)

  return (
    <>
      <Button variant="contained" color="primary" onClick={open}>
        Open Dialog
      </Button>
      <Dialog active={active} closable onDismiss={close} title="Lorem Ipsum">
        <p>
          Culpa nostrud sint elit duis ad aute aliqua non cupidatat eiusmod
          consequat adipisicing.
        </p>
        <SubmitRow>
          <Button variant="contained" onClick={close}>
            Close Dialog
          </Button>
        </SubmitRow>
      </Dialog>
    </>
  )
}

Dialog Props

active = boolean

Indicates if the dialog is open/shown.

closable = boolean

If true, automatically render a close button with onDismiss callback when clicked.

fullscreen = 'auto' | boolean

Expand the modal to the edges of the viewport; auto by default: Will automtically expand to fullscreen on mobile screens.

onDismiss = () => void

Function called whenever the user hits esc or clicks outside the dialog; Used to close the dialog or check if conditions are met before closing