Svelte component for rendering outside the parent component

Fork of: https://github.com/romkor/svelte-portal

Changes:

• Based on SvelteKit
• Typescript support
• Little code refactoring
• romkor#129

Installation

npm i @oklookat/svelte-portal

Usage

<Portal /> component has only one property: target.

Target can be a HTMLElement or a CSS selector that points to an already existing element.

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

Example

<script>
  import Portal from "@oklookat/svelte-portal";
  import { portal } from "@oklookat/svelte-portal";
</script>

<main>
  <Portal target="body">
    div in body (component)
  </Portal>

  <div use:portal={".overlay"}>
    div in .overlay (use)
  </div>
</main>

<div class="overlay" />