svelte-portal

KO | EN

gitlite — search

#hacktoberfest #react #llm #deep-learning #docker #macos #nodejs #windows #cli #kubernetes #awesome-list #vue #ios #openai

(★ 17)

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

svelte-portal 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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 `<Portal>` component and pass in a target and children:

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

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

You can also pass components as children:

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

svelte-portal

svelte-portal 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

svelte-portal

svelte-portal 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README