Modal Components

Your modal components will receive the following props when opened:

interface ModalProps<ReturnValue = any> extends Record<string, any> {
  // whether this modal is the topmost modal in the stack
  isOpen: boolean

  // the unique id of the modal
  id: string

  // the index of the modal in the stack
  index: number

  // closes the modal with an optional return value
  close: (value?: ReturnValue) => void

  // awaits transitions before opening the next modal
  exitBeforeEnter?: Action
}

Typescript

If you’re using Typescript, you should use this interface to define the props of your modal components.

MyModal.svelte

<script lang="ts">
  import type { ModalProps } from 'svelte-modals'

  // optional
  type CloseValue = 'cancel' | 'confirm'

  interface MyModalProps extends ModalProps<CloseValue> {
    title: string
  }

  const { isOpen, title, close }: MyModalProps = $props()

  function handleConfirm() {
    // uses CloseValue
    close('confirm')
  }
</script>