Modal

Status: Stable

Latest released: 2018

Current version: v8.7.2

Storybook
GitHub

Standard, accessible NerdWallet modal. Built on top of the 3rd party react-modal package.

Variants

Basic

With Secure Encryption Message

Development

import Modal from '@nerdwallet/react-modal';
<Modal>Content here..</Modal>;

Accessibility

Provide a concise accessible name to the element which has the role. This is generally done with aria-labelledby pointing to the ID of the header. If no header is available, aria-label can be used. This enables a screen reader user to better understand why and how the keyboard focus changed, when you set focus to the modal.

If your modal has a title, you can set the correct ARIA attributes like this:

<Modal
title="My label"
titleElementId="my-title-id"
aria={{
labelledby: 'my-title-id',
}}
/>

or if you're using <ModalHeader> directly:

<Modal
aria={{
labelledby: 'my-title-id',
}}
>
<ModalHeader
titleElementId="my-title-id"
title="My label"
/>
</Modal>

If your modal doesn't have a title, use the contentLabel prop:

<Modal
contentLabel="My label"
/>

Props

<Modal>

aria

Object

Additional ARIA attributes. This could be extended for more support

{
labelledby: string
}

Default

{}

children

node

Default

null

contentLabel

string

How the content container should be announced to screen readers

Default

null

hasScrollLock

boolean

A boolean flag to allow consumers to opt out of the body-scroll-lock which is enabled by default. Useful for instances of full viewport modal on mobile.

See https://nerdwallet.atlassian.net/browse/EM-3381

Default

true

shouldShowSecurityMessage

boolean

Flag to indicate if the encryption security message should be added to the modal.

Default

false

isOpen

boolean

Required

Describes if the modal should be shown or not.


onAfterOpen

Function

Will be run after the modal has opened.

Default

f => f

onRequestClose

Function

Run when the modal is requested to be closed (either by clicking on overlay or pressing ESC) Note: It is not called if isOpen is changed by other means. If isOpen is set to false, will manually invoke this function.

Default

f => f

shouldShowBack

boolean

Indicates if the back button should be shown.

Default

false

shouldCloseOnOverlayClick

boolean

Indicates if the modal should close when the overlay is clicked (clicking outside the modal)

Default

true

onRequestBack

Function

Run after the modal's back button is clicked.

Default

f => f

titleElementId

string

An id that will be given to the title's dom element, if provided

Default

null

title

string

The title text of the modal

Default

null

subtitle

string

The subtitle text of the modal

Default

null