https://github.com/ghostdevv/svelte-mount
A library to make detecting mounted state easier in Svelte
https://github.com/ghostdevv/svelte-mount
hacktoberfest
Last synced: 12 months ago
JSON representation
A library to make detecting mounted state easier in Svelte
- Host: GitHub
- URL: https://github.com/ghostdevv/svelte-mount
- Owner: ghostdevv
- License: mit
- Created: 2021-11-16T15:11:25.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-12-25T07:21:22.000Z (about 1 year ago)
- Last Synced: 2025-03-14T13:05:49.053Z (12 months ago)
- Topics: hacktoberfest
- Language: Svelte
- Homepage:
- Size: 86.9 KB
- Stars: 11
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Svelte Mount
Svelte Mount provides both a store and component that signals whether a component is mounted.
# Installing
This library is Svelte 5 only, if you want Svelte 3/4 use [svelte-mount@2](https://www.npmjs.com/package/svelte-mount/v/2.0.0).
```sh
npm install svelte-mount -D
```
# Using
To use you have two options, a component or a store:
- ## Component
This component can be incredibly useful if your content should only show once the component is mounted, such as using a animation with svelte kit or routify and only running the animation when the page is loaded
```html
import { fly } from 'svelte/transition';
import { Mount } from 'svelte-mount';
Hello World
```
- ## Store
Below is an example of how you might want to be able to reactively check if your component is mounted or not and then use that information for something that requires it to be mounted. Thanks to [Blu](https://github.com/bluwy) for this store
```html
import { mounted } from 'svelte-mount';
$effect(() => {
if ($mounted) {
console.log(document.getElementById('example').innerHTML);
}
});
Hello World
```
# Support
- Join the [discord](https://discord.gg/2Vd4wAjJnm)
- Create a issue on the [github](https://github.com/ghostdevv/svelte-mount)