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

Modal

Modal

Expand code

Editable Example

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

() => {
  return (
    <Modal
      modalHeading="Modal heading"
      modalLabel="Modal label"
      onRequestClose={function P() {}}
      onRequestSubmit={function P() {}}
      open
      primaryButtonText="Submit"
    >
      Open
    </Modal>
  );
};
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

Editable Example

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

() => {
  return <ModalWrapper>Open</ModalWrapper>;
};
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