https://github.com/romkor/svelte-portal

Svelte component for rendering outside the DOM of parent component
https://github.com/romkor/svelte-portal

portal svelte svelte3 sveltejs

Last synced: 2 days ago
JSON representation

Svelte component for rendering outside the DOM of parent component

• Host: GitHub
• URL: https://github.com/romkor/svelte-portal
• Owner: romkor
• License: mit
• Created: 2019-11-05T20:25:22.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-07-20T06:15:20.000Z (6 months ago)
• Last Synced: 2025-01-02T17:12:29.363Z (9 days ago)
• Topics: portal, svelte, svelte3, sveltejs
• Language: JavaScript
• Homepage: https://svelte.dev/repl/407576d4fa984cfb97dcdd3da98e833e
• Size: 1.12 MB
• Stars: 446
• Watchers: 4
• Forks: 22
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-svelte - svelte-portal - Component for rendering outside the DOM of parent component. (Utilities / Portal)

README

        
Svelte component for rendering outside the DOM of parent component

Idea borrowed from here: https://github.com/sveltejs/svelte/issues/3088#issuecomment-505785516

# Installation

```sh

npm install --save svelte-portal

```

or

```sh

yarn add svelte-portal

```

# Usage Portal component

The `` component has only one property: `target`

target can be a HTMLElement `target={document.body}` or a css selector `target="#modals"` that points to an already existing element.

When no target is given it defaults to: `document.body`.

## Example

```html

  import Portal from "svelte-portal";

  
Entity successfully updated!


```

# Usage portal action

The functionality can also be applied to DOM elements directly via a svelte action:

## Example

```html

  import { portal } from "svelte-portal";

Entity successfully updated!

```


The `hidden` atrribute is only needed when using ssr, when portal has moved the element to it's targetted location it removes the hidden attribute.

## TypeScript support

`` users should import from `"svelte-portal/src/Portal.svelte"` instead of `"svelte-portal"` to get typing support.