svelte-reparent

svelte's missing reparenting utility | alternative to react-reparent.

GitHub | npm

Explanation

svelte-reparent uses a limbo to store the component to be moved around, and different portals that the component can move to.

limbo is an invisible component, and any thing inside of it will be hidden. portals are the visible components that the component can move to.

When portals are destroyed, they will move the component back to limbo. When limbo is destroyed, it will completely destroy the component, no matter where it is.

A component has portal ID metadata attatched to it, allowing the component to be owned by portals, creating a safe way to move components around.

As mentioned in the example, the input has an "unkept state". This is state that isn't stored by svelte, demonstrating that the original element is only moved, not re-rendered.

Example Code

<script lang="ts">

	import { onMount } from 'svelte';

	import { Portal, Limbo, teleport } from 'svelte-reparent';

	let component: HTMLElement;

	function send(label: string) {

		return () => teleport(component, label);

	}

	onMount(send('a'));

</script>

<main>

	<Limbo bind:component>

		<input placeholder="Enter unkept state" />

	</Limbo>

	<div class="container">

		<h1>Container A</h1>

		<Portal key="a" {component} />

		<button on:click={send('a')}>Move Component Here</button>

	</div>

	<div class="container">

		<h1>Container B</h1>

		<Portal key="b" {component} />

		<button on:click={send('b')}>Move Component Here</button>

	</div>

</main>

made with ❤️ by leo