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

A Svelte component that lets you render some children into a different part of the DOM.
https://github.com/wobsoriano/svelte-portal

portal svelte teleport

Last synced: 9 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/wobsoriano/svelte-portal
• Owner: wobsoriano
• License: mit
• Created: 2024-10-11T12:35:36.000Z (27 days ago)
• Default Branch: main
• Last Pushed: 2024-10-21T21:24:38.000Z (17 days ago)
• Last Synced: 2024-10-22T06:23:17.981Z (17 days ago)
• Topics: portal, svelte, teleport
• Language: Svelte
• Homepage:
• Size: 306 KB
• Stars: 9
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-portal

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

## Installation

```bash

npm install @jsrob/svelte-portal

```

## Usage

To create a portal, use the `` component and pass in a target and children:

```svelte

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

	
This child is placed in the document body.


```

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

```svelte

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

	let open = $state(false);

 (open = true)}>Open Modal

	{#if open}

		


			
Hello from the modal!

			 (open = false)}>Close

		

	{/if}


	.modal {

		position: fixed;

		z-index: 999;

		top: 20%;

		left: 50%;

		width: 300px;

		margin-left: -150px;

	}

```

You can also pass components as children:

```svelte

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

	import Component from './Component.svelte';

	

```

### 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