1.0.2 • Published 2 years ago
@oklookat/svelte-portal v1.0.2
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
- https://github.com/romkor/svelte-portal/issues/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" />