Composable modal management.

Documentation

Example

const modal = createModal("key", () => {
    const { $status } = withModalStatus();

    const $anchorElement = withAnchorElement();
    const $anchorMeasurement = withAnchorMeasurement({
        $anchorElement,
        $status,
    });

    const $floatingElement = withFloatingElement();
    const $floatingMeasurement = withFloatingMeasurement({
        $floatingElement,
        $status,
    });

    const $boundary = withBoundary({
        $status,
        transform: (rect) => rect,
    });

    const $placement = withPlacement({
        placement: "down-center",
        $anchorMeasurement,
        $boundary,
        $floatingMeasurement,
    });

    const $position = withPosition({
        $anchorMeasurement,
        $boundary,
        $floatingMeasurement,
        $placement,
    });

    return {
        $anchorElement,
        $floatingElement,
        $position,
        $status,
    };
});

Installation

npm install @monstermann/signals-modal

pnpm add @monstermann/signals-modal

yarn add @monstermann/signals-modal

bun add @monstermann/signals-modal

Anchor

withAnchorElement

function withAnchorElement(
    anchorElement?: HTMLElement,
): Signal<HTMLElement | null>;

Assigns an anchor element to the current modal. This function must be called inside a createModal callback.

Example

import {
    createModal,
    withAnchorElement,
    setAnchorElement,
    getAnchorElement,
} from "@monstermann/signals-modal";

createModal("key", () => {
    withAnchorElement();
});

setAnchorElement("key", document.querySelector(".anchor"));
getAnchorElement("key"); // HTMLElement

withAnchorMeasurement

function withAnchorMeasurement(options: {
    $anchorElement: Reactive<HTMLElement | null>;
    $status: Reactive<ModalStatus>;
    transform?: (rect: Rect) => Rect;
}): Memo<Rect>;

Takes an anchor element and continuously measures its position while the modal is visible, to be used to position eg. a popover next to an element. This function must be called inside a createModal callback.

The optional transform option can be used to eg. make the anchor bigger, resulting with a margin between the anchor and floating popover.

Example

import {
    createModal,
    withAnchorElement,
    withModalStatus,
    withAnchorMeasurement,
    setAnchorElement,
    setModalStatus,
} from "@monstermann/signals-modal";

createModal("key", () => {
    const { $status } = withModalStatus();
    const $anchorElement = withAnchorElement();
    // Memo({ top: number, left: number, width: number, height: number })
    const $anchorMeasurement = withAnchorMeasurement({
        $status,
        $anchorElement,
    });
});

setAnchorElement("key", document.querySelector(".anchor"));
setModalStatus("key", "opened");

withMouseAnchor

function withMouseAnchor(options: {
    $status: Reactive<ModalStatus>;
    transform?: (rect: Rect) => Rect;
}): Memo<Rect>;

This can be used to make the mouse cursor the anchor, instead of an element. This function must be called inside a createModal callback.

Example

import {
    createModal,
    withModalStatus,
    withMouseAnchor,
    setModalStatus,
} from "@monstermann/signals-modal";

createModal("key", () => {
    const { $status } = withModalStatus();
    // Memo({ top: number, left: number, width: number, height: number })
    const $anchorMeasurement = withMouseAnchor({ $status });
});

// Updates $anchorMeasurement to the current mouse coordinates (once).
setModalStatus("key", "opened");

Core

createModal

function createModal(
    key: string,
    setup: () => T,
): T & {
    key: string;
    dispose: () => void;
    isDisposed: () => boolean;
    onDispose: (dispose: MaybeDispose) => void;
};

Creates a new modal.

Example

import { createModal } from "@monstermann/signals-modal";

const modal = createModal("key", () => ({}));
modal.key;
modal.dispose();
modal.onDispose(callback);

currentModal

function currentModal(): {
    key: string;
    dispose: () => void;
    onDispose: (dispose: MaybeDispose) => void;
};

Retrieves the current modal.

Example

import { createModal, currentModal } from "@monstermann/signals-modal";

createModal(() => {
    const modal = currentModal();
});

onModalDisposed

const onModalDisposed: Emitter<string>;

An emitter that fires when a modal gets disposed. The emitted value is the modal key.

Example

import { createModal, onModalDisposed } from "@monstermann/signals-modal";

const modal = createModal("key", () => {});

const stopListening = onModalDisposed((key) => {
    console.log(`Modal ${key} disposed`);
});

modal.dispose();

stopListening();

Floating

withFloatingElement

function withFloatingElement(
    floatingElement?: HTMLElement,
): Signal<HTMLElement | null>;

Assigns an floating element to the current modal. This function must be called inside a createModal callback.

Example

import {
    createModal,
    withFloatingElement,
    setFloatingElement,
    getFloatingElement,
} from "@monstermann/signals-modal";

createModal("key", () => {
    withFloatingElement();
});

setFloatingElement("key", document.querySelector(".floating"));
getFloatingElement("key"); // HTMLElement

withFloatingMeasurement

function withFloatingMeasurement(options: {
    $floatingElement: Reactive<HTMLElement | null>;
    $status: Reactive<ModalStatus>;
    transform?: (rect: Rect) => Rect;
}): Memo<Rect>;

Takes an floating element and continuously measures its position while the modal is visible, to be used to position eg. a popover next to an element. This function must be called inside a createModal callback.

Example

import {
    createModal,
    withFloatingElement,
    withModalStatus,
    withFloatingMeasurement,
    setFloatingElement,
    setModalStatus,
} from "@monstermann/signals-modal";

createModal("key", () => {
    const { $status } = withModalStatus();
    const $floatingElement = withFloatingElement();
    // Memo({ top: number, left: number, width: number, height: number })
    const $floatingMeasurement = withFloatingMeasurement({
        $status,
        $floatingElement,
    });
});

setFloatingElement("key", document.querySelector(".floating"));
setModalStatus("key", "opened");

Groups

getDialogs

function getDialogs(): ReadonlySet<string>;

Returns all dialog keys from the modalGroups.dialog group.

Example

import {
    createModal,
    withModalGroups,
    modalGroups,
    getDialogs,
} from "@monstermann/signals-modal";

createModal("key", () => {
    withModalGroups([modalGroups.dialog]);
});

getDialogs(); // Set(["key"])

getGroupsForModal

function getGroupsForModal(key: string): ReadonlySet<string>;

Returns all groups the given key belongs to.

Example

import {
    createModal,
    withModalGroups,
    modalGroups,
    getGroupsForModal,
} from "@monstermann/signals-modal";

createModal("key", () => {
    withModalGroups([modalGroups.dialog]);
});

getGroupsForModal("key"); // Set(["dialog"])

getModalsForGroup

function getModalsForGroup(group: string): ReadonlySet<string>;

Returns all keys the given group belongs to.

Example

import {
    createModal,
    withModalGroups,
    modalGroups,
    getModalsForGroup,
} from "@monstermann/signals-modal";

createModal("key", () => {
    withModalGroups([modalGroups.dialog]);
});

getModalsForGroup(modalGroups.dialog); // Set(["key"])

getPopovers

function getPopovers(): ReadonlySet<string>;

Returns all popover keys from the modalGroups.popover group.

Example

import {
    createModal,
    withModalGroups,
    modalGroups,
    getPopovers,
} from "@monstermann/signals-modal";

createModal("key", () => {
    withModalGroups([modalGroups.popover]);
});

getPopovers(); // Set(["key"])

getTooltips

function getTooltips(): ReadonlySet<string>;

Returns all tooltip keys from the modalGroups.tooltip group.

Example

import {
    createModal,
    withModalGroups,
    modalGroups,
    getTooltips,
} from "@monstermann/signals-modal";

createModal("key", () => {
    withModalGroups([modalGroups.tooltip]);
});

getTooltips(); // Set(["key"])

isDialog

function isDialog(key: string): boolean;

Returns a boolean indicating whether the given key belongs to the modalGroups.dialog group.

Example

import {
    createModal,
    withModalGroups,
    modalGroups,
    isDialog,
} from "@monstermann/signals-modal";

createModal("key", () => {
    withModalGroups([modalGroups.popover]);
});

isDialog("key"); // true

isModalInGroup

function isModalInGroup(key: string, group: string): boolean;

Returns a boolean indicating whether the given key belongs to the group.

Example

import {
    createModal,
    withModalGroups,
    modalGroups,
    isModalInGroup,
} from "@monstermann/signals-modal";

createModal("key", () => {
    withModalGroups([modalGroups.popover]);
});

isModalInGroup("key", modalGroups.popover); // true

isPopover

function isPopover(key: string): boolean;

Returns a boolean indicating whether the given key belongs to the modalGroups.popover group.

Example

import {
    createModal,
    withModalGroups,
    modalGroups,
    isPopover,
} from "@monstermann/signals-modal";

createModal("key", () => {
    withModalGroups([modalGroups.popover]);
});

isPopover("key"); // true

isTooltip

function isTooltip(key: string): boolean;

Returns a boolean indicating whether the given key belongs to the modalGroups.tooltip group.

Example

import {
    createModal,
    withModalGroups,
    modalGroups,
    isTooltip,
} from "@monstermann/signals-modal";

createModal("key", () => {
    withModalGroups([modalGroups.popover]);
});

isTooltip("key"); // true

modalGroups

const modalGroups = {
    dialog: "dialog",
    popover: "popover",
    tooltip: "tooltip",
};

A record containing common modal groups.

withModalGroups

function withModalGroups(groups: Iterable<string>): Memo<ReadonlySet<string>>;

Assigns the current modal to a list of groups. Can be used to for example mark the modal as a dialog/popover/tooltip. This function must be called inside a createModal callback.

Example

import {
    createModal,
    withModalGroups,
    getDialogs,
    getGroupsForModal,
    getModalsForGroup,
} from "@monstermann/signals-modal";

createModal("key", () => {
    withModalGroups(["dialog"]);
});

getGroupsForModal("key"); // Set(["dialog"])
getModalsForGroup("dialog"); // Set(["key"])

Position

withBoundary

function withBoundary(options: {
    $status: Reactive<ModalStatus>;
    transform?: (rect: Rect) => Rect;
}): Memo<Rect>;

Constructs a Rect resembling the window dimensions, to be fed into withPlacement and withPosition, used to constrain the floating element to be within the window boundary. This function must be called inside a createModal callback.

The optional transform option can be used to eg. make the Rect smaller, increasing the distance between the floating element and the edges of the window.

Example

import {
    createModal,
    withModalStatus,
    withBoundary,
} from "@monstermann/signals-modal";

createModal("key", () => {
    const { $status } = withModalStatus();
    const $boundary = withBoundary({ $status });
});

withPlacement

function withPlacement(options: {
    placement: ModalPlacementOption;
    $boundary: () => Rect;
    $anchorMeasurement: () => Rect;
    $floatingMeasurement: () => Rect;
}): Memo<ModalPlacement>;

type ModalPlacementOption =
    | "vertical-center"
    | "vertical-left"
    | "vertical-right"
    | "horizontal-center"
    | "horizontal-up"
    | "horizontal-down"
    | "up-center"
    | "down-center"
    | "left-down"
    | "right-down";

type ModalPlacement =
    | "down-center"
    | "down-left"
    | "down-right"
    | "left-center"
    | "left-down"
    | "left-up"
    | "right-center"
    | "right-down"
    | "right-up"
    | "up-center"
    | "up-left"
    | "up-right";

Takes a ModalPlacementOption and resolves it to ModalPlacement, picking whichever side has more space. This function must be called inside a createModal callback.

Example

import {
    createModal,
    withModalStatus,
    withAnchorElement,
    withAnchorMeasurement,
    withFloatingElement,
    withFloatingMeasurement,
    withBoundary,
    withPlacement,
} from "@monstermann/signals-modal";

createModal("key", () => {
    const { $status } = withModalStatus();
    const $anchorElement = withAnchorElement();
    const $floatingElement = withFloatingElement();
    const $anchorMeasurement = withAnchorMeasurement({
        $status,
        $anchorElement,
    });
    const $floatingMeasurement = withFloatingMeasurement({
        $status,
        $floatingElement,
    });
    const $boundary = withBoundary({ $status });
    const $placement = withPlacement({
        placement: "vertical-center",
        $boundary,
        $anchorMeasurement,
        $floatingMeasurement,
    });
});

withPosition

function withPosition(options: {
    $boundary: () => Rect;
    $placement: () => ModalPlacement;
    $anchorMeasurement: () => Rect;
    $floatingMeasurement: () => Rect;
    transform?: (rect: Rect) => Rect;
}): Memo<{
    floatingX: number;
    floatingY: number;
    maxHeight: number;
    maxWidth: number;
    originX: number;
    originY: number;
}>;

Consumes a range of measurements and calculates the final position for the floating element. This function must be called inside a createModal callback.

Example

import {
    createModal,
    withModalStatus,
    withAnchorElement,
    withAnchorMeasurement,
    withFloatingElement,
    withFloatingMeasurement,
    withBoundary,
    withPlacement,
    withPosition,
} from "@monstermann/signals-modal";

createModal("key", () => {
    const { $status } = withModalStatus();
    const $anchorElement = withAnchorElement();
    const $floatingElement = withFloatingElement();
    const $anchorMeasurement = withAnchorMeasurement({
        $status,
        $anchorElement,
    });
    const $floatingMeasurement = withFloatingMeasurement({
        $status,
        $floatingElement,
    });
    const $boundary = withBoundary({ $status });
    const $placement = withPlacement({
        placement: "vertical-center",
        $boundary,
        $anchorMeasurement,
        $floatingMeasurement,
    });
    const $position = withPosition({
        $boundary,
        $placement,
        $anchorMeasurement,
        $floatingMeasurement,
    });
});

Scroll

withCloseOnScroll

function withCloseOnScroll(options: {
    $anchorElement: Reactive<HTMLElement | null>;
    $status: Reactive<ModalStatus>;
}): void;

Automatically closes the modal when any scrollable ancestor of the anchor element is scrolled. This function must be called inside a createModal callback.

The function listens for scroll events on all scrollable parent elements of the anchor element and triggers a close when scrolling occurs. Scroll listeners are only active when the modal is opening or opened (not when closing or closed).

Example

import {
    createModal,
    withModalStatus,
    withAnchorElement,
    withCloseOnScroll,
} from "@monstermann/signals-modal";

createModal("key", () => {
    const { $status } = withModalStatus();
    const $anchorElement = withAnchorElement();

    withCloseOnScroll({
        $status,
        $anchorElement,
    });
});

Status

closeAllModals

function closeAllModals(): void;

Closes all modals by setting their status to "closing". Skips modals that are already "closing" or "closed".

Example

import {
    createModal,
    withModalStatus,
    openModal,
    closeAllModals,
} from "@monstermann/signals-modal";

createModal("modal1", () => {
    withModalStatus();
});

createModal("modal2", () => {
    withModalStatus();
});

openModal("modal1");
openModal("modal2");
closeAllModals();

closeModal

function closeModal(key: string): void;

Closes a modal by setting its status to "closing". Does nothing if the modal is already "closing" or "closed", or if the modal doesn't exist.

Example

import {
    createModal,
    withModalStatus,
    openModal,
    closeModal,
} from "@monstermann/signals-modal";

createModal("key", () => {
    withModalStatus();
});

openModal("key");
closeModal("key");

getClosedModals

function getClosedModals(): string[];

Returns an array of all modal keys with status "closed".

Example

import {
    createModal,
    withModalStatus,
    getClosedModals,
} from "@monstermann/signals-modal";

createModal("modal1", () => {
    withModalStatus();
});

createModal("modal2", () => {
    withModalStatus();
});

getClosedModals(); // ["modal1", "modal2"]

getClosingModals

function getClosingModals(): string[];

Returns an array of all modal keys with status "closing".

Example

import {
    createModal,
    withModalStatus,
    closeModal,
    getClosingModals,
} from "@monstermann/signals-modal";

createModal("modal1", () => {
    withModalStatus("opened");
});

createModal("modal2", () => {
    withModalStatus("opened");
});

closeModal("modal1");
closeModal("modal2");

getClosingModals(); // ["modal1", "modal2"]

getModalStatus

function getModalStatus(key: string): ModalStatus;

Retrieves the current status of a modal. Returns "closed" if the modal doesn't exist.

ModalStatus can be one of: "closed", "opening", "opened", or "closing".

Example

import {
    createModal,
    withModalStatus,
    getModalStatus,
} from "@monstermann/signals-modal";

createModal("key", () => {
    withModalStatus();
});

getModalStatus("key"); // "closed"

getOpenedModals

function getOpenedModals(): string[];

Returns an array of all modal keys with status "opened".

Example

import {
    createModal,
    withModalStatus,
    getOpenedModals,
} from "@monstermann/signals-modal";

createModal("modal1", () => {
    withModalStatus("opened");
});

createModal("modal2", () => {
    withModalStatus("opened");
});

getOpenedModals(); // ["modal1", "modal2"]

getOpeningModals

function getOpeningModals(): string[];

Returns an array of all modal keys with status "opening".

Example

import {
    createModal,
    withModalStatus,
    openModal,
    getOpeningModals,
} from "@monstermann/signals-modal";

createModal("modal1", () => {
    withModalStatus();
});

createModal("modal2", () => {
    withModalStatus();
});

openModal("modal1");
openModal("modal2");

getOpeningModals(); // ["modal1", "modal2"]

getOpenModals

function getOpenModals(): string[];

Returns an array of all modal keys with status "opening" or "opened".

Example

import {
    createModal,
    withModalStatus,
    getOpenModals,
} from "@monstermann/signals-modal";

createModal("modal1", () => {
    withModalStatus("opening");
});

createModal("modal2", () => {
    withModalStatus("opened");
});

createModal("modal3", () => {
    withModalStatus("closed");
});

getOpenModals(); // ["modal1", "modal2"]

getVisibleModals

function getVisibleModals(): string[];

Returns an array of all modal keys that are visible (not "closed"). This includes "opening", "opened", and "closing" statuses.

Example

import {
    createModal,
    withModalStatus,
    openModal,
    getVisibleModals,
} from "@monstermann/signals-modal";

createModal("modal1", () => {
    withModalStatus();
});

createModal("modal2", () => {
    withModalStatus();
});

openModal("modal1");
openModal("modal2");

getVisibleModals(); // ["modal1", "modal2"]

isAnyModalClosed

function isAnyModalClosed(): boolean;

Returns true if any modal has status "closed".

Example

import {
    createModal,
    withModalStatus,
    isAnyModalClosed,
} from "@monstermann/signals-modal";

createModal("modal1", () => {
    withModalStatus();
});

createModal("modal2", () => {
    withModalStatus("opened");
});

isAnyModalClosed(); // true

isAnyModalClosing

function isAnyModalClosing(): boolean;

Returns true if any modal has status "closing".

Example

import {
    createModal,
    withModalStatus,
    closeModal,
    isAnyModalClosing,
} from "@monstermann/signals-modal";

createModal("modal1", () => {
    withModalStatus("opened");
});

createModal("modal2", () => {
    withModalStatus();
});

closeModal("modal1");

isAnyModalClosing(); // true

isAnyModalOpen

function isAnyModalOpen(): boolean;

Returns true if any modal has status "opening" or "opened".

Example

import {
    createModal,
    withModalStatus,
    isAnyModalOpen,
} from "@monstermann/signals-modal";

createModal("modal1", () => {
    withModalStatus();
});

createModal("modal2", () => {
    withModalStatus("opened");
});

isAnyModalOpen(); // true

isAnyModalOpened

function isAnyModalOpened(): boolean;

Returns true if any modal has status "opened".

Example

import {
    createModal,
    withModalStatus,
    isAnyModalOpened,
} from "@monstermann/signals-modal";

createModal("modal1", () => {
    withModalStatus();
});

createModal("modal2", () => {
    withModalStatus("opened");
});

isAnyModalOpened(); // true

isAnyModalOpening

function isAnyModalOpening(): boolean;

Returns true if any modal has status "opening".

Example

import {
    createModal,
    withModalStatus,
    openModal,
    isAnyModalOpening,
} from "@monstermann/signals-modal";

createModal("modal1", () => {
    withModalStatus();
});

createModal("modal2", () => {
    withModalStatus();
});

openModal("modal1");

isAnyModalOpening(); // true

isAnyModalVisible

function isAnyModalVisible(): boolean;

Returns true if any modal is visible (not "closed"). This includes "opening", "opened", and "closing" statuses.

Example

import {
    createModal,
    withModalStatus,
    isAnyModalVisible,
} from "@monstermann/signals-modal";

createModal("modal1", () => {
    withModalStatus();
});

createModal("modal2", () => {
    withModalStatus("opened");
});

isAnyModalVisible(); // true

isModalClosed

function isModalClosed(key: string): boolean;

Returns true if the modal's status is "closed" or if the modal doesn't exist.

Example

import {
    createModal,
    withModalStatus,
    isModalClosed,
} from "@monstermann/signals-modal";

createModal("key", () => {
    withModalStatus();
});

isModalClosed("key"); // true

isModalClosing

function isModalClosing(key: string): boolean;

Returns true if the modal's status is "closing".

Example

import {
    createModal,
    withModalStatus,
    openModal,
    closeModal,
    isModalClosing,
} from "@monstermann/signals-modal";

createModal("key", () => {
    const { $status } = withModalStatus();
    $status("opened");
});

closeModal("key");
isModalClosing("key"); // true

isModalOpen

function isModalOpen(key: string): boolean;

Returns true if the modal's status is "opening" or "opened".

Example

import {
    createModal,
    withModalStatus,
    isModalOpen,
} from "@monstermann/signals-modal";

createModal("key", () => {
    const { $status } = withModalStatus("opening");
});

isModalOpen("key"); // true

isModalOpened

function isModalOpened(key: string): boolean;

Returns true if the modal's status is "opened".

Example

import {
    createModal,
    withModalStatus,
    openModal,
    isModalOpened,
} from "@monstermann/signals-modal";

createModal("key", () => {
    const { $status } = withModalStatus();
    $status("opened");
});

isModalOpened("key"); // true

isModalOpening

function isModalOpening(key: string): boolean;

Returns true if the modal's status is "opening".

Example

import {
    createModal,
    withModalStatus,
    openModal,
    isModalOpening,
} from "@monstermann/signals-modal";

createModal("key", () => {
    withModalStatus();
});

openModal("key");
isModalOpening("key"); // true

isModalVisible

function isModalVisible(key: string): boolean;

Returns true if the modal is visible (not "closed"). This includes "opening", "opened", and "closing" statuses.

Example

import {
    createModal,
    withModalStatus,
    openModal,
    isModalVisible,
} from "@monstermann/signals-modal";

createModal("key", () => {
    withModalStatus();
});

openModal("key");
isModalVisible("key"); // true

onModalClosed

const onModalClosed: Emitter<string>;

An emitter that fires when a modal transitions to the "closed" status. The emitted value is the modal key.

Example

import {
    createModal,
    withModalStatus,
    onModalClosed,
} from "@monstermann/signals-modal";

createModal("key", () => {
    withModalStatus();
});

const stopListening = onModalClosed((key) => {
    console.log(`Modal ${key} closed`);
});

stopListening();

onModalClosing

const onModalClosing: Emitter<string>;

An emitter that fires when a modal transitions to the "closing" status. The emitted value is the modal key.

Example

import {
    createModal,
    withModalStatus,
    onModalClosing,
} from "@monstermann/signals-modal";

createModal("key", () => {
    withModalStatus();
});

const stopListening = onModalClosing((key) => {
    console.log(`Modal ${key} closing`);
});

stopListening();

onModalOpened

const onModalOpened: Emitter<string>;

An emitter that fires when a modal transitions to the "opened" status. The emitted value is the modal key.

Example

import {
    createModal,
    withModalStatus,
    onModalOpened,
} from "@monstermann/signals-modal";

createModal("key", () => {
    withModalStatus();
});

const stopListening = onModalOpened((key) => {
    console.log(`Modal ${key} opened`);
});

stopListening();

onModalOpening

const onModalOpening: Emitter<string>;

An emitter that fires when a modal transitions to the "opening" status. The emitted value is the modal key.

Example

import {
    createModal,
    withModalStatus,
    onModalOpening,
} from "@monstermann/signals-modal";

createModal("key", () => {
    withModalStatus();
});

const stopListening = onModalOpening((key) => {
    console.log(`Modal ${key} opening`);
});

stopListening();

openModal

function openModal(key: string): void;

Opens a modal by setting its status to "opening". Does nothing if the modal is already "opening" or "opened", or if the modal doesn't exist.

Example

import {
    createModal,
    withModalStatus,
    openModal,
} from "@monstermann/signals-modal";

createModal("key", () => {
    withModalStatus();
});

openModal("key");

setModalStatus

function setModalStatus(key: string, status: ModalStatus): void;

Sets the status of a modal. Does nothing if the modal doesn't exist.

ModalStatus can be one of: "closed", "opening", "opened", or "closing".

Example

import {
    createModal,
    withModalStatus,
    setModalStatus,
} from "@monstermann/signals-modal";

createModal("key", () => {
    withModalStatus();
});

setModalStatus("key", "opened");

withModalStatus

function withModalStatus(status: ModalStatus = "closed"): {
    $isOpen: Memo<boolean>;
    $mounted: Memo<boolean>;
    $status: Signal<ModalStatus>;
    close: () => void;
    open: () => void;
    toggle: () => void;
};

Creates and returns a status signal for the current modal. This function must be called inside a createModal callback.

The optional status parameter sets the initial status of the modal (defaults to "closed").

ModalStatus can be one of: "closed", "opening", "opened", or "closing".

Example

import { createModal, withModalStatus } from "@monstermann/signals-modal";

// Default to "closed"
createModal("modal1", () => {
    const { $status } = withModalStatus();
    console.log($status()); // "closed"
});

// Start with a different initial status
createModal("modal2", () => {
    const { $status } = withModalStatus("opened");
    console.log($status()); // "opened"

    // Update the status
    $status("closing");
});