Have ideas to improve npm?Join in the discussion! »

    svelte-portal

    2.1.2 • Public • Published

    Svelte component for rendering outside the DOM of parent component

    Idea borrowed from here: https://github.com/sveltejs/svelte/issues/3088#issuecomment-505785516

    Installation

    npm install --save svelte-portal

    or

    yarn add svelte-portal

    Usage Portal component

    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.

    Example

    <script>
      import Portal from "svelte-portal";
    </script>
    
    <Portal target="body">
      <div class="toast">Entity successfully updated!</div>
    </Portal>

    Usage portal action

    The functionality can also be applied to DOM elements directly via a svelte action:

    Example

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

    TypeScript support

    <script lang="ts"> users should import from "svelte-portal/src/Portal.svelte" instead of "svelte-portal" to get typing support.

    Keywords

    Install

    npm i svelte-portal

    DownloadsWeekly Downloads

    970

    Version

    2.1.2

    License

    MIT

    Unpacked Size

    9.77 kB

    Total Files

    16

    Last publish

    Collaborators

    • avatar