Skip to main content

Advanced Features

Dynamic props based on parameters (Advanced)​

const DynamicModal = modal()
  // Props that change based on parameters
  .props((params) => ({
    title: `Editing ${params.itemName}`,
    style: params.isImportant ? ['modal', 'urgent'] : ['modal'],
    showClose: params.allowClose !== false
  }))
  .content((props) => {
    const { itemName, isImportant } = props
    return (
      <div>
        <p>Item: {itemName}</p>
        {isImportant && <p>⚠️ Important!</p>}
      </div>
    )
  })

DynamicModal.open({ 
  itemName: 'Product X', 
  isImportant: true,
  allowClose: false 
})

Clone and reuse modals (Advanced)​

// Base modal with common configurations
const BaseModal = modal()
  .props({
    style: ['modal', 'elevated'],
    showClose: true
  })

// Create variations of the base modal
const AlertModal = BaseModal
  .clone()
  .content(() => <div>Alert!</div>)

const ConfirmModal = BaseModal
  .clone()
  .props({ title: 'Confirmation' })
  .content(() => <div>Confirm?</div>)

Independent modal (Advanced)​

const IndependentModal = modal({
  // Does not participate in the stack system
  independent: true,
  // Renders even when invisible (for animations)
  rendersWhenHidden: true
})

// Must be rendered manually
function App() {
  return (
    <div>
      {/* Render independent manually */}
      <IndependentModal.Component />
      
      {/* Other modals */}
      <Modal.GlobalOutlet />
    </div>
  )
}