svelte-portal

A Svelte 5 component that lets you render some children into a different part of the DOM.

Installation

npm install @jsrob/svelte-portal

Usage

To create a portal, use the <Portal> component and pass in a target and children:

<script>
    import { Portal } from '@jsrob/svelte-portal';
</script>

<Portal target="body">
    <p>This child is placed in the document body.</p>
</Portal>

Another example, a modal that is rendered into the body when a button is clicked:

<script>
    import { Portal } from '@jsrob/svelte-portal';

    let open = $state(false);
</script>

<button onclick={() => (open = true)}>Open Modal</button>

<Portal target="body">
    {#if open}
        <div class="modal">
            <p>Hello from the modal!</p>
            <button onclick={() => (open = false)}>Close</button>
        </div>
    {/if}
</Portal>

<style>
    .modal {
        position: fixed;
        z-index: 999;
        top: 20%;
        left: 50%;
        width: 300px;
        margin-left: -150px;
    }
</style>

You can also pass components as children:

<script>
    import { Portal } from '@jsrob/svelte-portal';
    import Component from './Component.svelte';
</script>

<Portal target="#element">
    <Component />
</Portal>

Props

All props can be changed dynamically.

Caveats

When updating the target or disabled prop value, components in the default snippet are unmounted and re-mounted, which means any changes to their local state are lost.

If you need to persist state, use some sort of state management.

License

MIT