Modal Standard
A basic and commonly used modal
Deprecated
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
onCloseClick
requiredFunction that fires to close the modal.
children
Content that appears above the Backdrop.
Defaultundefined
onOpenFinish
Function that fires once the modal has opened and transitions have ended.
Defaultundefined
onCloseFinish
Function that fires once the modal has closed and transitions have ended.
Defaultundefined
shouldCloseOnBackdropClick
Determines if the modal should close when clicking on the Backdrop, outside of the
children
.Defaulttrue
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.
Defaultfalse
isOpen
Should the Backdrop appear open.
Defaultfalse
theme
Sets the color of the background and close button.
Default'faint'