Modal Svelte#

Modal component for Svelte

Features:

• Autofocus
• Focus trapping
• Returns focus after closing
• Form mode

Demo

Install#

npm install modal-svelte

Usage#

<script>
	import Modal from 'modal-svelte'
</script>

<Modal title="Hello world!" onCancel={() => (open = false)}>
	<p>Content</p>
</Modal>

Functionality#

This shows all available functionality

<Modal
	title="Hello world!"
	onCancel={() => (open = false)}
	form={() => submitMyForm()}
	noEscapeHandling
	noCloseIcon
	class="w-full"
>
	<p>Content</p>
	<input />

	<!-- If you want to bring focus to a specific element -->
	<input autofocus />

	<div slot="buttons">
		<button type="submit">Submit</button>
	</div>

</Modal>

:root {
	--modal-bg: #fff;
	color: #000;
}

Dev instructions#

Get started#

1. Install Node.js
2. Run npm install

Commands#

• npm run dev: Start in dev mode
• npm run build: Build
• npm run lint: Lint
• npm run format: Format

Publish new version#

1. Update CHANGELOG.md
2. Check for errors

   npm run lint
   

3. Bump the version number

   npm version --no-git-tag <version>
   

4. Generate the package

   npm run build:package
   

5. Publish the package

   npm publish
   

6. Commit with a tag in format "v#.#.#"
7. Create GitHub release with release notes