Svelte component for rendering outside the DOM of parent component
Idea borrowed from here: sveltejs/svelte#3088 (comment)
npm install --save svelte-portal
or
yarn add svelte-portal
The <Portal />
component has only one property: target
target can be a HTMLElement target={document.body}
or a css selector target="#modals"
that points to an already existing element.
When no target is given it defaults to: document.body
.
<script>
import Portal from "svelte-portal";
</script>
<Portal target="body">
<div class="toast">Entity successfully updated!</div>
</Portal>
The functionality can also be applied to DOM elements directly via a svelte action:
<script>
import { portal } from "svelte-portal";
</script>
<div class="toast" use:portal={"body"} hidden>Entity successfully updated!</div>
The hidden
atrribute is only needed when using ssr, when portal has moved the element to it's targetted location it removes the hidden attribute.
<script lang="ts">
users should import from "svelte-portal/src/Portal.svelte"
instead of "svelte-portal"
to get typing support.