@krestui/svelte-portal v0.4.8
Portal
@krestui/svelte-portal is a svelte component to implement Portal functionality.
Installation
package.json
"dependencies": {
"@krestui/svelte-portal": "^0.4.8",
}Problem Statement
Portals are used to display HTML elements that need not be necessarily in the document flow.
Usage and Example
Example.svelte
<script lang="ts">
import Portal from '@krestui/svelte-portal/Portal.svelte';
let isOpen = false;
function enter() {
isOpen = true;
}
function leave() {
isOpen = false;
}
</script>
<button type="button" on:mouseenter={enter} on:mouseleave={leave}
>Hover over me to enable and disable portal
</button>
<Portal {isOpen}>
<span>Some Portal Content</span>
</Portal>In the example above, the Portal content appears and disappears accordingly when we hover over the button.
Internals
By default, the Portal svelte component looks for a div by id portals in the current HTML document .
In case the div does not exist before, it can be created as a child at the root of the HTML document, right under <body> as - <div id="portals" />.
An example is illustrated below.
<body>
...
<div id="portals" />
</body>It appends the slot as a child to the <div id='portals'> .
Use Cases
Some of the popular applications include popovers, dropdowns and modals as in most of these cases they need not be in the document flow.