@foundationcomponentrepo/Modal

Base Modal component for foundation

Props

isOpen: boolean

The isOpen prop determines whether the modal is open/visible or not.

children?: JSX.Element

The children prop can be used if a custom JSX element/React component is to be displayed in the modal

handleClose?: () => void

The handleClose prop is to handle the action performed when the modal is to be closed. The close button on the top right corner is displayed only if this prop is passed.

handleNavBack?: () => void

The handleNavBack prop facilitates in performing navigation actions. The back button on the top left corner is displayed only if this prop is passed.

template?: ConfirmTemplateInterface | AlertTemplateInterface | AlertInputTemplateInterface:

The template prop has to be used if one of the three existing modal designs/templates is needed

The existing modal designs/templates are

confirm-template
alert-template
alert-with-input-template\

interface ConfirmTemplateInterface {
  type: string;     // 'confirm-template'
  title: string;
  label: string;
  onCancel?: () => void;
  onSave?: () => void;
};

interface AlertTemplateInterface = {
  type: string;     // 'alert-template'
  title: string;
  label: string;
  onClickNo?: () => void;
  onClickYes?: () => void;
};

interface AlertInputTemplateInterface = {
  type: string;     // 'alert-input-template'
  title: string;
  dropLabel: string;
  dropOptions: Array<{
    id: number;
    data: string;
    active: boolean;
  }>;
  textLabel: string;
  onClickNo?: () => void;
  onClickYes?: (formData: { textarea: string; option: string }) => void;
};

Install

npm install --save @foundationcomponentrepo/modal

License

MIT © unplatforms