# svelte-mount

> A library to make detecting mounted state easier in Svelte

Latest version **3.0.2** (published 2024-12-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-mount
pnpm add svelte-mount
yarn add svelte-mount
bun add svelte-mount
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2024-12-25 |
| First published | 2021-11-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 4.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Willow GHOST |
| Maintainers | ghostsos |

## Links

- npm: https://www.npmjs.com/package/svelte-mount
- Repository: https://github.com/ghostdevv/svelte-mount
- Homepage: https://github.com/ghostdevv/svelte-mount#readme
- Issues: https://github.com/ghostdevv/svelte-mount/issues
- npm.io page: https://npm.io/package/svelte-mount

## Recent versions

- 3.0.2 (latest) — 2024-12-25
- 3.0.1 — 2024-12-25
- 3.0.0 — 2024-10-21
- 2.0.0 — 2023-06-25
- 1.0.2 — 2021-11-16
- 1.0.1 — 2021-11-16
- 1.0.0 — 2021-11-16
- 0.0.0-reserve — 2021-11-16

## 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
    <script>
    	import { fly } from 'svelte/transition';
    	import { Mount } from 'svelte-mount';
    </script>

    <Mount>
    	<div in:fly="{{ y: -20 }}">Hello World</div>
    </Mount>
    ```

-   ## 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
    <script>
    	import { mounted } from 'svelte-mount';

    	$effect(() => {
    		if ($mounted) {
    			console.log(document.getElementById('example').innerHTML);
    		}
    	});
    </script>

    <h1 id="example">Hello World</h1>
    ```

# Support

-   Join the [discord](https://discord.gg/2Vd4wAjJnm)<br>
-   Create a issue on the [github](https://github.com/ghostdevv/svelte-mount)

---
_Source: https://npm.io/package/svelte-mount · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._