@jsrob/svelte-portal

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.

Prop	Type	Description	Required
target	string | HTMLElement	Specify target container. Can either be a selector or an actual element.	Yes
disabled	boolean	When true, the content will remain in its original location instead of moved into the target container.	No

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