Repository files navigation

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 HTMLElementtarget={document.body} or a css selectortarget="#modals" that points to an already existing element.

When no target is given it defaults to:document.body.

<script>importPortalfrom"svelte-portal";</script><Portaltarget="body"><divclass="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><divclass="toast"use:portal={"body"} hidden>Entity successfully updated!</div>

Thehidden 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.