Skip to main content

API

const AlertModal = modal()
  .content((props) => {
    // props.toggle closes the modal
    const { toggle } = props
    
    return (
      <div>
        <h2>Alert!</h2>
        <p>Something happened</p>
        <button onClick={toggle}>Close</button>
      </div>
    )
  })

// Open the modal
AlertModal.open()

// Close the modal
AlertModal.close()

// Toggle (open if closed, close if open)
AlertModal.toggle()
const MessageModal = modal()
  .content((props) => {
    // Receive data when the modal opens
    const { toggle, title, message } = props
    
    return (
      <div>
        <h2>{title}</h2>
        <p>{message}</p>
        <button onClick={toggle}>OK</button>
      </div>
    )
  })

// Pass data when opening
MessageModal.open({ 
  title: "Success!", 
  message: "Operation completed successfully" 
})
const ConfirmModal = modal()
  .content((props) => {
    const { toggle, message, request } = props
    
    return (
      <div>
        <h2>Confirmation</h2>
        <p>{message}</p>
        <button onClick={() => request.resolve(true)}>
          Yes
        </button>
        <button onClick={() => request.resolve(false)}>
          No
        </button>
      </div>
    )
  })

// Use and await the response
const response = await ConfirmModal.request({ 
  message: "Are you sure you want to delete?" 
})

if (response) {
  console.log("User confirmed!")
} else {
  console.log("User cancelled")
}
// Give a unique ID to each modal
const UserModal = modal({ id: 'USER_MODAL' })
  .content(() => <div>User modal</div>)

// Now you can access from anywhere
const modal = Modal.getInstance('USER_MODAL')
modal.open()

Modal props can be defined directly in the component. These props are initially applied to the modal defined as WrapperComponent. The style prop, for example, is propagated to both the content and the WrapperComponent. Thus, in addition to content-specific props, the component also accepts all props available in the WrapperComponent.

const StyledModal = modal()
  .props({
    // Properties that go to the modal wrapper
    style: ['elevated', 'rounded'],
    title: 'My Styled Modal',
    showClose: true
  })
  .content(() => <div>Content</div>)