https://github.com/probablykasper/modal-svelte
https://github.com/probablykasper/modal-svelte
svelte
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/probablykasper/modal-svelte
- Owner: probablykasper
- License: mit
- Created: 2022-12-11T14:46:41.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-10-23T05:46:23.000Z (over 1 year ago)
- Last Synced: 2025-07-06T07:02:23.646Z (12 months ago)
- Topics: svelte
- Language: Svelte
- Homepage:
- Size: 861 KB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Modal Svelte
Modal component for Svelte
[](https://npmjs.com/package/modal-svelte)
[](LICENSE)
[](https://npmjs.com/package/modal-svelte)
[](https://github.com/probablykasper/modal-svelte/actions/workflows/test.yml)
Features:
- Autofocus
- Focus trapping
- Returns focus after closing
- Form mode
[Demo](https://modal-svelte.kasper.space/)
## Install
```
npm install modal-svelte
```
## Usage
```svelte
import Modal from 'modal-svelte'
(open = false)}>
Content
```
### Functionality
This shows all available functionality
```svelte
(open = false)}
form={() => submitMyForm()}
noEscapeHandling
noCloseIcon
class="w-full"
>
Content
Submit
```
```css
: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
```
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