Manage modals like a boss 💪!
No wrapper components, no extra markup, no dependencies, just modals.
npm install @mateothegreat/svelte5-modal-manager
ModalConfig
Propertiesname | default | description |
---|---|---|
name |
required | The name of the modal. |
classes |
optional | Extra css classes to add. |
component |
required | Svelte component reference. |
closeIcon |
optional | Show a close icon, top right. |
closeOnEscape |
optional | Close modal on escape key. |
closeOnExternalClick |
optional | Close modal on outside click. |
The manager.open()
method takes a ModalConfig
object as an argument (see above):
<script lang="ts">
import { ModalManager } from "@mateothegreat/svelte5-modal-manager";
import TestComponent from "../../lib/components/test-component.svelte";
const manager = new ModalManager();
manager.open({
id: "test-modal-1",
component: TestComponent,
classes: "bg-slate-300/50 p-10" // optional
});
</script>
I'm inside a modal via modal manager!
When the modal manager instantiates your component
, it will pass in a ModalInstance
object as a prop
so you can interact with the manager from within your component.
From inside your client component you can interact with the manager via the instance
prop.
<script lang="ts">
import { ModalInstance } from "@mateothegreat/svelte5-modal-manager";
let { instance }: { instance: ModalInstance<any> } = $props();
</script>
<div class="bg-slate-300 p-10">
<h1 class="text-3xl font-bold underline">this is inside a modal</h1>
<button on:click={() => instance.manager.close(instance.config.id)}>close</button>
</div>