@berlitz/modal

Modal component for the Max Design System

Usage no npm install needed!

<script type="module">
  import berlitzModal from 'https://cdn.skypack.dev/@berlitz/modal';
</script>

README

Modal npm version

Installation

yarn add @berlitz/modal

Props

Argument Type Required Default Description
children node ✅ - Used to fill the inside of the modal with content.
onClose function ✅ - Callback function called when the close button is click, the user clicks outside the modal or presses the 'escape' key.
open boolean ❌ false Opens or closes the modal.
size string ❌ sm Sets the size of the modal.

Usage

// TODO fill this in
import Modal from '@berlitz/modal'

export class App extends React.Component {
  state = {
    open: this.props.open || false,
  }

  render() {
    return (
      <>
        <Modal
          size="md"
          open={this.state.open}
          onClose={() => this.setState({ open: false })}
        >
          <h1>All of my modal content goes here</h1>
        </Modal>
        <Button onClick={() => this.setState({ open: true })}>
          Open Modal
        </Button>
      </>
    )
  }
}