{"repo":"flekschas/svelte-simple-modal","free":true,"listed":false,"github":"https://github.com/flekschas/svelte-simple-modal","clone":"git clone https://github.com/flekschas/svelte-simple-modal.git","description":"A simple, small, and content-agnostic modal for Svelte v3, v4, and v5","language":"Svelte","stars":429,"topics":["svelte","svelte-v3","svelte-components","modal","dialog","popup","svelte-v4","svelte-v5"],"license":"MIT","category":"ui-components","readme_excerpt":"Svelte Simple Modal A simple, small, and content-agnostic modal for Svelte. Live demo: https://svelte.dev/playground/b95ce66b0ef34064a34afc5c0249f313?version=5.17.3 Works with: Svelte =v5 ! [!NOTE] If you want to use Svelte Simple Modal with Svelte v3 or v4, check out version 1. Table of Contents - Install - Rollup Setup - Usage - TypeScript Example - Svelte Store Example - Styling - SSR - Accessibility - API - Component - Events - Context API - Store API - FAQ Install Rollup Setup Make sure that the main application's version of svelte is used for bundling by setting @rollup/plugin-node-resolve 's dedupe option as follows: Usage Import the Modal component into your main app component (e.g., App.svelte ). The modal is exposing two context functions: - open() opens a component as a modal. - close() simply closes the modal. Demo: https://svelte.dev/repl/52e0ade6d42546d8892faf8528c70d30 Usage with TypeScript You can use the Context type exported by the package to validate the getContext function: Usage With a Svelte Store Alternatively, you can use a Svelte store to show/hide a component as a modal. Demo: https://svelte.dev/repl/aec0c7d9f5084e7daa64f6d0c8ef0209 The component is the same as in the example above. To hide the modal programmatically, simply unset the store. E.g., modal.set(null) . Styling The modal comes pre-styled for convenience but you can easily extent or replace the styling using either custom CSS classes or explicit CSS styles. Custom CSS classes can be applie","default_branch":null,"files":null,"tree":[],"storefront":"/r/flekschas","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/flekschas/svelte-simple-modal/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}