TypeScript - Define parameter types

The main typing rule in this package is that modal content receives a flattened props object:

• modal control props like visible and toggle
• optional request handlers through request
• your custom params directly on the same object

Unlike @codeleap/portals, this package does not provide a richer wrapper typing surface such as PortalWrapperProps. In @codeleap/modals, focus your type safety on modal params and results.

// Define the types your modal will receive and return
interface UserModalParams {
  userId: string
  mode: 'view' | 'edit'
}

interface UserModalResult {
  saved: boolean
  user?: User
}

// Use the types in the modal
const UserModal = modal<UserModalParams, UserModalResult>()
  .content((props) => {
    // props now has complete typing!
    const { userId, mode, request } = props
    
    const saveUser = () => {
      request.resolve({ 
        saved: true, 
        user: { id: userId, name: 'John' } 
      })
    }
    
    return (
      <div>
        <h2>{mode === 'edit' ? 'Edit' : 'View'} User</h2>
        <p>ID: {userId}</p>
        {mode === 'edit' && (
          <button onClick={saveUser}>Save</button>
        )}
      </div>
    )
  })

// Now has autocomplete and type checking
const result = await UserModal.request({ 
  userId: '123', 
  mode: 'edit' 
})

if (result.saved) {
  console.log('User saved:', result.user)
}