Modal

Status: Stable

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

Variants

Basic

() => {
  const [modalOpen, setOpen] = React.useState(false);
  const toggleOpen = () => setOpen(open => !open);
  return (
    <React.Fragment>
      <Modal
        isOpen={modalOpen}
        onRequestClose={toggleOpen}
        subtitle="Subtitle"
        title="Title"
      >
        Modal content goes here.
      </Modal>
      <Button primary onClick={toggleOpen}>
        Open
      </Button>
    </React.Fragment>
  );
};

With Secure Encryption Message

Open in Playroom

() => {
  const [modalOpen, setOpen] = React.useState(false);
  const toggleOpen = () => setOpen(open => !open);
  return (
    <React.Fragment>
      <Modal
        isOpen={modalOpen}
        onRequestClose={toggleOpen}
        shouldShowSecurityMessage
        subtitle="Subtitle"
        title="Title"
      >
        Modal content goes here.
      </Modal>
      <Button primary onClick={toggleOpen}>Open</Button>
    </React.Fragment>
  );
};

With Back Button

Open in Playroom

() => {
  const [modalOpen, setOpen] = React.useState(false);
  const toggleOpen = () => setOpen(open => !open);
  return (
    <React.Fragment>
      <Modal
        isOpen={modalOpen}
        onRequestClose={toggleOpen}
        shouldShowBack
        onRequestBack={() => setOpen(false)}
        subtitle="Subtitle"
        title="Title"
      >
        Modal content goes here.
      </Modal>
      <Button primary onClick={toggleOpen}>Open</Button>
    </React.Fragment>
  );
};

With Call to Action

Open in Playroom

() => {
  const [modalOpen, setOpen] = React.useState(false);
  const toggleOpen = () => setOpen(open => !open);
  return (
    <React.Fragment>
      <Modal
        isOpen={modalOpen}
        onRequestClose={toggleOpen}
        subtitle="Subtitle"
        title="Title"
      >
        <Stack spacing={5}>
          Modal content goes here.
          <Button primary>Text</Button>
        </Stack>
      </Modal>
      <Button primary onClick={toggleOpen}>Open</Button>
    </React.Fragment>
  );
};

Accessibility

It's important for the modal to have a label. If you're using the Modal's title prop, it will automatically be used as the label.

If you use a custom title, you can use the aria prop to wire things up yourself:

<Modal
  aria={{
    labelledby: 'modal-title',
  }}
>
  <Title id="modal-title">My Modal Title</Title>
</Modal>

Development

The underlying react-modal library needs to know the root of your application so it can hide it via the aria-hidden attribute when the modal is open. This "app element" is automatically set to #main, so you shouldn't need to change this when working in normal React apps. However, if you're working in other contexts like Storybook, you may wish to change this app element:

import { Modal } from '@nerdwallet/currency';
Modal.setAppElement('#other-query-selector-here');

If you are writing component tests, you may need to have the tests run inside an HTML wrapper with id="main" set for the modal to render correctly in context.

See more info in the react-modal docs on app-element .

Props

<Modal>

onRequestBack

Function

Run after the modal's back button is clicked.

shouldShowSecurityMessage

boolean

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

shouldShowBack

boolean

Indicates if the back button should be shown.

titleElementId

string

unique id for the title's dom element. If not provided, an autogenerated id will be used.

title

string

The title text of the modal

subtitle

string

The subtitle text of the modal

aria

Object

Deprecated

Additional ARIA attributes. This could be extended for more support @deprecated

{

labelledby: string

}

closeTimeoutMS

number

Deprecated

Duration for modal visual animations @deprecated

contentLabel

string

Deprecated

How the content container should be announced to screen readers @deprecated

onAfterOpen

Function

Deprecated

Will be run after the modal has opened. @deprecated