<Modals />

Responsible for rendering the current stack of modals.

Props

Modals can receive the following props (which are currently all just snippets):

interface ModalsProps {
  backdrop?: Snippet<[modals: Modals]>
  modal?: Snippet<
    [
      modal: {
        component: ModalComponent<ModalProps<any>, {}, string>;
        props: ModalProps
      },
      modals: Modals
    ]
  >
  loading?: Snippet<[modals: Modals]>
}

backdrop

Renders when at least 1 modal has been opened.

<Modals>
  {#snippet backdrop(modals)}
    <div class="backdrop" onclick={() => modals.close()}></div>
  {/snippet}
</Modals>

modal

Renders each modal component in the stack

<Modals>
  {#snippet modal(modal, modals)}
    <modal.component {...modal.props} />
  {/snippet}
</Modals>

loading

Renders when a modal has been opened via dynamic import and is still loading.

<Modals>
  {#snippet loading()}
    <LoadingSpinner />
  {/snippet}
</Modals>

Advanced Usage

Always show all modals

By overriding the modal snippet, you can change the behavior of the stack to always show each opened modal.

<script>
  import { Modals, modals } from 'svelte-modals'
</script>

<Modals>
  {#snippet backdrop({ close })}
    <div class="backdrop" onclick={() => close()}></div>
  {/snippet}

  {#snippet modal(modal)}
    <modal.component
      {...modal.props}
      isOpen={modals.stack.length > 0}
    />
  {/snippet}
</Modals>

Open

Notice how clicking “close” on a modal in the background will close that modal rather than the one on the top. This is because these modal components use the close() prop, which will dismiss that modal specifically.

You can also close a modal by using modals.closeById(id) and passing an id to the modal.

modals.open(ModalComponent, props, { id: 'some-id' })
modals.closeById('some-id')