Parameters

Configure initial values

const ConfiguredModal = modal({
  // Parameters that the modal will always have
  initialParams: { 
    color: 'blue',
    size: 'large' 
  },
  // Open automatically when loading
  startsOpen: false,
  // Animation duration
  transitionDuration: 500
})

Asynchronous parameters and configurations

You can use Promises to load data before the modal appears:

const AsyncModal = modal({
  // Load parameters from an API
  initialParams: async () => {
    const userData = await fetch('/api/user').then(r => r.json())
    return {
      userName: userData.name,
      userRole: userData.role,
      preferences: userData.preferences
    }
  },
  
  // Decide whether to open based on a condition
  startsOpen: async () => {
    const shouldShow = await fetch('/api/should-show-modal').then(r => r.json())
    return shouldShow.display
  }
})
  .content((props) => {
    const { userName, userRole, preferences } = props
    
    return (
      <div>
        <h2>Welcome, {userName}!</h2>
        <p>Your role: {userRole}</p>
        <p>Preferences: {JSON.stringify(preferences)}</p>
      </div>
    )
  })

// The modal only appears after data loads
AsyncModal.open()

Common use cases:

• Load user data before showing the modal
• Check permissions before opening
• Fetch dynamic configurations
• Validate server conditions

// Example: Edit modal that loads data
const EditModal = modal({
  initialParams: async () => {
    // Simulate loading
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // Fetch necessary data
    const [userData, permissions, options] = await Promise.all([
      fetch('/api/user').then(r => r.json()),
      fetch('/api/permissions').then(r => r.json()),
      fetch('/api/form-options').then(r => r.json())
    ])
    
    return {
      user: userData,
      canEdit: permissions.edit,
      availableOptions: options
    }
  }
})
  .content((props) => {
    const { user, canEdit, availableOptions } = props
    
    if (!canEdit) {
      return <div>You don't have permission to edit</div>
    }
    
    return (
      <form>
        <h2>Editing: {user.name}</h2>
        <select>
          {availableOptions.map(opt => (
            <option key={opt.id} value={opt.value}>
              {opt.label}
            </option>
          ))}
        </select>
      </form>
    )
  })