Svelte Simple Modal

Overview

This product is a simple and small modal for Svelte, a JavaScript framework. It is content-agnostic, meaning it can be used with any type of content.

Features

• Context API: Exposes two context functions, open() and close(), for opening and closing the modal.
• TypeScript Support: Can be used with TypeScript by using the exported Context type.
• Svelte Store Support: Can be used with a Svelte store to show/hide a component as a modal.
• Styling Options: Comes with pre-styled options, but allows for customization through custom CSS classes or explicit CSS styles.
• Server-Side Rendering (SSR) Support: Can be enabled for SSR using SvelteKit or dynamically imported in the onMount() lifecycle function.
• Accessibility: Applies WAI-ARIA guidelines for modal dialogs automatically, including trapping tab focus and closing on pressing the escape key.

Installation

To install the Svelte modal, follow these steps:

1. Make sure that the main application’s version of Svelte is used for bundling by setting the dedupe option in rollup-plugin-node-resolve.
2. Import the Modal component into your main app component.
3. If using TypeScript, use the exported Context type to validate the getContext function.
4. If using a Svelte store, use it to show/hide a component as a modal.
5. Customize the styling of the modal using custom CSS classes or explicit CSS styles.

Summary

The Svelte modal is a lightweight and versatile solution for displaying modals in Svelte applications. It provides convenient context functions for opening and closing modals, supports TypeScript and Svelte stores, and allows for easy customization of styles. It also has support for server-side rendering and follows accessibility guidelines for modal dialogs.