Components

Modal Standard(React)

A basic and commonly used modal.

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

Deprecated

This package was deprecated in favor of ModalCurtain.

Basic modal

Modals can be opened or closed with a isOpen prop.

This example includes a wrapper component that opens the modal when the button is clicked on.

class ModalStandardDemo extends React.Component {
    constructor() {
        super();

        this.state = {
            isOpen: false,
        };

        this.closeModal = this.closeModal.bind(this);
        this.openModal = this.openModal.bind(this);
    }

    closeModal() {
        this.setState({ isOpen: false });
        console.log('ModalStandard `onCloseClick` fired');
    }

    openModal() {
        this.setState({ isOpen: true });
    }

    render() {
        return (
            <div>
                <Button onClick={this.openModal}>Open Modal</Button>

                <ModalStandard
                    isOpen={this.state.isOpen}
                    onCloseClick={this.closeModal}
                    shouldCloseOnBackdropClick
                    onOpenFinish={() => {
                        console.log('ModalStandard `onOpenFinish` fired');
                    }}
                    onCloseFinish={() => {
                        console.log('ModalStandard `onCloseFinish` fired');
                    }}
                >
                    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.
                </ModalStandard>
            </div>
        );
    }
}

Props

ModalStandard

  • children

    Content that appears above the Backdrop.

    Type
    node
    Default
    undefined
  • onCloseClick
    required

    Function that fires to close the modal.

    Type
    func
  • onOpenFinish

    Function that fires once the modal has opened and transitions have ended.

    Type
    func
    Default
    undefined
  • onCloseFinish

    Function that fires once the modal has closed and transitions have ended.

    Type
    func
    Default
    undefined
  • shouldCloseOnBackdropClick

    Determines if the modal should close when clicking on the Backdrop, outside of the children.

    Type
    bool
    Default
    true
  • shouldHideCloseButton

    Determines if the close button should be rendered. This is generally discouraged and should be used carefully. If used, the contents passed into the modal must contain a focusable element such as a link or button.

    Type
    bool
    Default
    false
  • isOpen

    Should the Backdrop appear open.

    Type
    bool
    Default
    false
  • theme

    Sets the color of the background and close button.

    Type
    oneOf([
      'brand',
      'faint',
    ]);
    Default
    'faint'