API Reference

<Modals />

Render the current stack of modals. See full documentation.

modals

A global instance of the ModalContext class and is responsible for managing modals.

svelte-modals/modal-context.svelte.d.ts

import { Modal, type ModalProps } from './modal.svelte';
import type { LazyModalComponent, ModalComponent } from './types';
export declare class ModalsContext {
    private exitBeforeEnter;
    /**
     * The current stack of modals
     */
    stack: Modal<any>[];
    /**
     * The last action that was performed on the modals stack. This
     * can be useful for animations
     */
    action: "push" | "pop" | null;
    /**
     * Whether we're currently waiting for transitions to finish
     * before opening the next modal
     */
    transitioning: boolean;
    /**
     * Opens a new modal
     */
    open: <Props extends ModalProps = ModalProps<any>, Exports extends Record<string, any> = {}, Bindings extends keyof ModalProps | "" = string, Result = Props extends ModalProps<infer R> ? R : unknown>(component: ModalComponent<Props, Exports, Bindings> | LazyModalComponent<Props, Exports, Bindings>, props?: Omit<Props, "isOpen">, options?: {
        /**
         * The id of the modal. Can be used to close it with closeById()
         */
        id?: string;
        /**
         * This modal will close and replace the last modal in the stack.
         * If the current modal prevents closing it,
         * the promise will be rejected with an error
         */
        replace?: boolean;
    }) => Promise<Result | undefined>;
    /**
     * Closes the last `amount` of modals in the stack
     *
     * If closing was prevented by any modal it returns false
     */
    close: (amount?: number) => boolean;
    /**
     * Closes a modal by its id. Can be provided with `options.id` in modals.open(Comp, props, options)
     */
    closeById: (id: string) => boolean;
    /**
     * Closes all modals in the stack.
     *
     * If closing was prevented by any modal, it returns false
     */
    closeAll: () => boolean;
}