@tdcerhverv/dialog NPM

Dialog Component

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

Example of usage

import { Dialog, DialogButtonGroup } from '@tdcerhverv/dialog';
import { TextButton, DefaultButton } from '@tdcerhverv/button';

const DialogComponent = () => {
  const $submitButton = React.createRef();

  const [active, setActive] = React.useState(false);

  const toggle = React.useCallback(() => {
    setActive(s => !s);
  }, []);

  const handleCancel = () => {
    // Handle cancel here
    toggle();
  };
  const handleSubmit = () => {
    // Handle submit here
  };

  return (
    <Dialog
      active={active}
      closeLabel="Close"
      heading="Delete user?"
      description="This action cannot be undone."
      handleSubmit={handleSubmit}
      handleCancel={handleCancel}
      autoFocus={$submitButton}
    >
      <DialogButtonGroup>
        <TextButton type="button" onClick={handleCancel}>
          Cancel
        </TextButton>
        <DefaultButton ref={$submitButton} type="submit">
          Delete
        </DefaultButton>
      </DialogButtonGroup>
    </Dialog>
  );
};

Props

interface DialogProps extends HTMLAttributes<HTMLDivElement> {
  active: boolean;
  autoFocus?: React.RefObject<HTMLElement>;
  children: ReactElement;
  closeLabel?: string;
  description?: string;
  dialogClassName?: string;
  handleCancel?: () => void;
  handleSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
  heading?: ReactNode;
  overlayClassName?: string;
}