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()

Use open() when the caller only needs to show the modal. If the caller needs a result back, use request() instead.

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" 
})

The custom params are flattened into props, so you read title and message directly instead of from a nested params object.

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")
}

request() is the right choice for confirm, pick, or submit flows. Inside the modal content, resolve or reject through request.

// 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>)

open(...) vs setParams(...)​

ProductModal.open({ productId: '42' })
// opens the modal and merges these params into the current params

ProductModal.setParams({ productId: '99' })
// replaces the current params without opening the modal

ProductModal.resetParams()
// restores the initial params

Use open(...) when you want to show the modal. Use setParams(...) only when you intentionally want to update the current params outside the open action.