Dialog

⚠️ This documentation file needs to be reviewed ⚠️, but the component is ready to use.

Dialog is modal window used to get users answer to a specific question.

Basic Usage

To implement the Modal component, you need to import it first:

import { Dialog } from 'rades_react';

And use it:

React.createElement(() => {
  const [dialogOpen, setDialogOpen] = React.useState(false);
  const primaryButtonRef = React.useRef();
  const closeButtonRef = React.useRef();

  return (
    <>
      <Button
        label="Launch dialog"
        onClick={() => setDialogOpen(true)}
      />
      <div>
      {dialogOpen && (
        <Dialog
          closeButtonRef={closeButtonRef}
          color="danger"
          primaryButton={(
            <Button
              label="Yes"
              onClick={() => setDialogOpen(false)}
              ref={primaryButtonRef}
            />
          )}
          primaryButtonRef={primaryButtonRef}
          secondaryButton={(
            <Button
              color="secondary"
              label="Cancel"
              onClick={() => setDialogOpen(false)}
              ref={closeButtonRef}
            />
          )}
          title="Confirmation"
        >
          <p>Are you sure?</p>
        </Dialog>
      )}
      </div>
    </>
  );
});

See API for all available options.

API