🚧 This website is work in progress 👷
Components
Overlay
Modal
Published

Modal

Modal

Expand code

Editable Example

import { Button, Modal } from "@wfp/react";

(args) => {
  const [isOpen, setOpen] = useState(args.open);
  const handleModalClose = () => {
    setOpen(!isOpen);
  };
  return (
    <>
      <Modal
        onRequestClose={handleModalClose}
        open={isOpen}
        modalHeading="Modal heading"
        modalLabel="Modal label"
        onRequestSubmit="() => alert('Submitted')"
        primaryButtonText="Submit"
      />
      <Button onClick={() => setOpen(true)}>
        Open Modal
      </Button>
    </>
  );
};
PropDefaultDescriptionValue

modalLabel

React.ReactNode
–

Specify the content of the modal header label.

modalHeading

React.ReactNode
–

Specify the content of the modal header title.

lazyLoad

boolean
–

Specify whether the modals content should be only loaded when the Modal is open

passiveModal

boolean
–

Specify whether the modal should be button-less

components

–

modalAriaLabel

string
–

Specify a label to be read by screen readers on the modal root node

elementToAppend

HTMLElement
–

modalSecondaryAction

React.ReactNode
–

secondaryButtonText

React.ReactNode
–

Specify the text for the secondary button

secondaryButtonDisabled

boolean
–

Specify whether the secondary Button should be disabled, or not

onSecondarySubmit

() => void
–

Specify a handler for the secondary button. Useful if separate handler from onRequestClose is desirable

primaryButtonText

React.ReactNode
–

Specify the text for the primary button

primaryButtonDisabled

boolean
–

Specify whether the Button should be disabled, or not

open

boolean
–

Specify whether the Modal is currently open

hideClose

boolean
–

Specify to hide the close button

selectorsFloatingMenus

string[]
–

Specify CSS selectors that match DOM elements working as floating menus. Focusing on those elements won't trigger "focus-wrap" behavior

selectorPrimaryFocus

string |boolean
–

Specify a CSS selector that matches the DOM element that should be focused when the Modal opens. If "false" no selector will be triggered

type

"info"
–

Different styling options are available info

inPortal

boolean
–

If true the Modal will be rendered inside a portal at the end of the body element, otherwise at the position it is placed.

wide

boolean
–

If true the Modal will be wider then the regular Modal

onRequestClose

(evt: React.UIEvent,trigger: "button" |"key" |"background") => void
–

Specify a handler for closing modal. The handler should care of closing modal, e.g. changing open prop.

onRequestSubmit

() => void
–

Specify a handler for "submitting" modal. The handler should care of closing modal, e.g. changing open prop, if necessary.

iconDescription

string
–

Provide a description for "close" icon that can be read by screen readers

className

string
–

The CSS class name to be placed on the wrapping element.

id

string
–

Specify the DOM element ID of the top-level node.

backgroundImage

string
–

This optional prop allows you to specify a background image for the component. It expects a string containing a URL address of the image.

handleBlur

(obj?: unknown) => void
–

This optional prop is a function that handles the onBlur event for the component.

primaryButtonRef

React.RefObject<HTMLButtonElement>
–

secondaryButtonRef

React.RefObject<HTMLButtonElement>
–

ModalWrapper

Expand code

Editable Example

import { Modal, ModalWrapper } from "@wfp/react";

() => {
  return (
    <ModalWrapper
      buttonTriggerText="Open modal"
      modalHeading="Modal heading"
      modalLabel="Modal label"
      primaryButtonText="Submit"
    />
  );
};
PropDefaultDescriptionValue

id

string
–

ID of the trigger button.

disabled

boolean
–

customButton

ReactElement<any,string |JSXElementConstructor<any>>
–

Specify a custom trigger Button.

buttonTriggerText

ReactNode
–

Specify the text for the trigger Button.

buttonTriggerClassName

string
–

Specify a class for the trigger Button.

handleOpen

() => void
–

@param handle - function to open the modal

handleSubmit

(handle: () => void) => void
() => {}

@param handle - function to submit content in the modal

default: () => {}

handleClose

() => void
–

@param handle - function to close the modal

triggerButtonKind

ButtonKind
–

Specify the kind of trigger Button.

shouldCloseAfterSubmit

boolean
true

Specify whether the Modal should be closed after submit

default: true

primaryButtonDisabled

boolean
–

Specify whether the primary button should be disabled or not

onKeyDown

(evt: KeyboardEvent<HTMLDivElement>) => void
–

A function that is called when the user presses the Esc key to close the modal.

modalLabel

React.ReactNode
–

Specify the content of the modal header label.

modalHeading

React.ReactNode
–

Specify the content of the modal header title.

lazyLoad

boolean
–

Specify whether the modals content should be only loaded when the Modal is open

passiveModal

boolean
–

Specify whether the modal should be button-less

components

–

modalAriaLabel

string
–

Specify a label to be read by screen readers on the modal root node

elementToAppend

HTMLElement
–

modalSecondaryAction

React.ReactNode
–

secondaryButtonText

React.ReactNode
–

Specify the text for the secondary button

secondaryButtonDisabled

boolean
–

Specify whether the secondary Button should be disabled, or not

onSecondarySubmit

() => void
–

Specify a handler for the secondary button. Useful if separate handler from onRequestClose is desirable

primaryButtonText

React.ReactNode
–

Specify the text for the primary button

open

boolean
–

Specify whether the Modal is currently open

hideClose

boolean
–

Specify to hide the close button

selectorsFloatingMenus

string[]
–

Specify CSS selectors that match DOM elements working as floating menus. Focusing on those elements won't trigger "focus-wrap" behavior

selectorPrimaryFocus

string |boolean
–

Specify a CSS selector that matches the DOM element that should be focused when the Modal opens. If "false" no selector will be triggered

type

"info"
–

Different styling options are available info

inPortal

boolean
–

If true the Modal will be rendered inside a portal at the end of the body element, otherwise at the position it is placed.

wide

boolean
–

If true the Modal will be wider then the regular Modal

onRequestClose

(evt: React.UIEvent,trigger: "button" |"key" |"background") => void
–

Specify a handler for closing modal. The handler should care of closing modal, e.g. changing open prop.

onRequestSubmit

() => void
–

Specify a handler for "submitting" modal. The handler should care of closing modal, e.g. changing open prop, if necessary.

iconDescription

string
–

Provide a description for "close" icon that can be read by screen readers

className

string
–

The CSS class name to be placed on the wrapping element.

backgroundImage

string
–

This optional prop allows you to specify a background image for the component. It expects a string containing a URL address of the image.

handleBlur

(obj?: unknown) => void
–

This optional prop is a function that handles the onBlur event for the component.

primaryButtonRef

React.RefObject<HTMLButtonElement>
–

secondaryButtonRef

React.RefObject<HTMLButtonElement>
–

On this page

References