Svelte Portal

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

Admin

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

Tokens:471

Snippets:4

Trust Score:9.8

License:MIT

Update:1 year ago

Show doc for...

Tokens:

Raw

### Install svelte-portal using npm

Source: https://github.com/wobsoriano/svelte-portal/blob/main/README.md

This command installs the svelte-portal package using npm. Ensure you have Node.js and npm installed on your system.

```bash
npm install @jsrob/svelte-portal
```

--------------------------------

### Basic svelte-portal Usage

Source: https://github.com/wobsoriano/svelte-portal/blob/main/README.md

Demonstrates how to use the `<Portal>` component in Svelte to render a paragraph into the document's body. It requires importing the `Portal` component and specifying the 'body' as the target.

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

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

--------------------------------

### Svelte Portal Rendering Another Component

Source: https://github.com/wobsoriano/svelte-portal/blob/main/README.md

Illustrates rendering another Svelte component (`Component.svelte`) within a portal. The target is specified using a CSS selector '#element'. This requires the `Component.svelte` file to be present in the same directory.

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

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

--------------------------------

### Svelte Portal for Conditional Modal Rendering

Source: https://github.com/wobsoriano/svelte-portal/blob/main/README.md

Shows a Svelte component that uses the `<Portal>` to render a modal dynamically. The modal is displayed when the 'open' state variable is true and is rendered into the 'body'. Includes basic styling for the modal.

```svelte
<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>
```

Tokens:

Raw