A Portal library for Svelte. Supports SSR and No dom move.


online example:

example code:


yarn add @yeungkc/svelte-portal -D
npm install @yeungkc/svelte-portal --save-dev


Setup Portal Container

It is recommended to set up the <PortalContainer /> in your +layout.svelte, for example:

// +layout.svelte
<slot />
<PortalContainer />

You can setup multiple Portal Containers by using the name parameter:

// +layout.svelte
<slot />
<PortalContainer name="foo" />

Show Portal

Setup the <Portal /> where you want it to be displayed. The usage is similar to <svelte:component>.

<Portal portal-id="id" portal-container-name="name" this={SomeComponent} />

If SomeComponent requires a parameter, foo, you can add it in the <Portal>:

<Portal portal-id="id" portal-container-name="name" this={SomeComponent} {foo} />

portal-id is an optional parameter for setting a fixed id for the Portal. It defaults to a random id.

portal-container-name is an optional parameter for selecting a specific Portal Container for the Portal.

Known issues

Currently, svelte-portal does not support setting bind and forwarding event like svelte:component.

Top categories

svelte logo

Want a Svelte site built?

Hire a Svelte developer
Loading Svelte Themes