Modal

<Modal> draws a dialog over the whole screen. Put one at any level, including inside an Entity: like a Hud, it draws in the screen layer and keeps every context around it.

Its props are in ModalProps.

import { useState } from "react";
import { Button, Modal, Text } from "@daniel-zarinski/engine";

export function Chest() {
    const [open, setOpen] = useState(true);

    return (
        <Modal open={open} title="A chest" pause onClose={() => setOpen(false)}>
            <Text>Ten coins inside.</Text>
            <Button onPress={() => setOpen(false)}>Take</Button>
        </Modal>
    );
}

One stack

The engine keeps one stack of open modals, and only the top one draws. Two chests opened at once show one; closing it shows the other. The world stays paused while any modal on the stack asks for pause, the top one or one under it.

Pausing

A modal pauses nothing unless it passes pause. The world keeps running behind it, as it does behind a Roblox menu: a game with other players in it cannot stop for one player’s dialog. A single-player game passes pause, as Godot’s get_tree().paused does, so the world waits while the player reads. Time spent paused is not made up afterwards.

Escape and the backdrop

The modal is the browser’s own dialog, so focus stays inside it and the page behind it takes no input. Escape and a click on the backdrop call onClose rather than closing the dialog, because the stack, not the browser, decides what is open.