Components

Modal Curtain(React)

An overlay that contains content and covers the page

Version:14.18.2 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react
Import:import { ModalCurtain } from '@thumbtack/thumbprint-react';

Before using this component…

ModalCurtain is a low-level component that should only be used if the Modal component is too restrictive. Please reach out to the Design Systems team before using it.

Examples

The ModalCurtain component makes it easy to create an accessible overlay that contains content and covers the page. It contains a few powerful features:

  • Focus trap: Move the browser’s focus to the first interactive element within the children. Trap the focus within the ModalCurtain while it is open, preventing users from accidentally tabbing to the page underneath.
  • Scroll lock: Prevent the page from scrolling while the ModalCurtain is open.
  • Append to the body tag: Move the HTML to end of the DOM, right before the </body> tag. This greatly decreases the chance of running into z-index issues.
  • Listen for Esc key press: Run a function to close the ModalCurtain if the user presses Esc.
  • Close on ModalCurtain click: Make it easy to close the modal if the ModalCurtain is clicked on.

The ModalCurtain component CSS handles positioning, overflow, z-index, visibility, and opacity. It does not include background colors, padding, transitions, or other opinionated styles since the component was designed to be versatile.

ModalCurtain with a basic modal

This example contains a ModalCurtain with a basic modal and no transition. Because there is no transition, the stage prop only cycles between entered and exited.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus est nec eros congue, ac dapibus ipsum cursus. Quisque at odio viverra, consequat metus a, commodo ipsum. Donec sodales sapien in luctus sodales. Vivamus ornare mauris in arcu maximus placerat. Cras vitae interdum ipsum. Proin convallis quis elit quis pellentesque. Curabitur a ex eget neque congue tempor sed ut felis. Vivamus in erat ac lacus vehicula condimentum. Nam fringilla molestie facilisis. Etiam eros nisl, mattis et sagittis non, blandit vel nisl. Duis blandit condimentum lorem, sed convallis sapien porttitor vitae. Curabitur molestie, massa et molestie aliquam, odio purus rhoncus sem, a sodales ipsum nisi ac nibh. Nunc in dapibus mauris. Pellentesque rhoncus id arcu at auctor.

ModalCurtain with a custom initial focus

By default the curtain will focus on the container when it opens. If your modal contains a focusable input, you may wish to skip directly to this. Pass a selector for an element in the modal’s children to initialFocus to acheive this.

Add a professional license
Licenses add credibility to your business and provide more trust for customers.

ModalCurtain with a full screen takeover

The ModalCurtain component works well for full-screen takeovers. This example doesn’t use curtainOnClick since we don’t want to close the curtain when clicking on the backdrop.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus est nec eros congue, ac dapibus ipsum cursus. Quisque at odio viverra, consequat metus a, commodo ipsum. Donec sodales sapien in luctus sodales. Vivamus ornare mauris in arcu maximus placerat. Cras vitae interdum ipsum. Proin convallis quis elit quis pellentesque. Curabitur a ex eget neque congue tempor sed ut felis. Vivamus in erat ac lacus vehicula condimentum. Nam fringilla molestie facilisis. Etiam eros nisl, mattis et sagittis non, blandit vel nisl. Duis blandit condimentum lorem, sed convallis sapien porttitor vitae. Curabitur molestie, massa et molestie aliquam, odio purus rhoncus sem, a sodales ipsum nisi ac nibh. Nunc in dapibus mauris. Pellentesque rhoncus id arcu at auctor.

Props

ModalCurtain

  • onCloseClick
    required

    Function that fires to close the modal.

    Type
    () => void
  • children

    Content that appears on top of the curtain. children is a render prop and expects a function. The function provided receives an object two properties:

    • curtainClassName: Handles positioning, z-index, opacity, overflow, and visibility. Should be added to the className of the outermost element within the children.
    • curtainOnClick: You can optionally add this prop to the onClick of an element within children. This is typically used on to close a ModalCurtain when clicking on a dark backdrop.

    The examples on this page include code samples that demonstrate real use of these props.

    Type
    ({ curtainClassName, curtainOnClick, }: { curtainClassName: string; curtainOnClick: (event: React.MouseEvent<HTMLElement>) => void; }) => JSX.Element
  • stage

    The four states that a modal can be in.

    • exited – Modal is fully closed
    • entering – Modal is opening
    • entered – Modal has fully open
    • exiting – Modal is closing

    Modals that do not have transitions will only use the entered and exited stages.

    Type

    This prop can be one of the following 5 types:

    • 'entering'
    • 'entered'
    • 'exiting'
    • 'exited'
    • null
    Default
    'exited'
  • accessibilityLabel

    Accessibility title used to describe the content of the modal to screen readers.

    Type
    string
    Default
    'Modal'
  • shouldCloseOnEscape

    Determines if the modal should close when pressing the escape key.

    Type
    boolean
    Default
    true
  • initialFocus

    The element that should be focused when the modal opens. If omitted, the entire container element of the modal is focused.

    Type

    This prop can be one of the following 2 types:

    • HTMLElement
    • null