https://github.com/leodog896/svelte-reparent

reparent elements with ease in svelte
https://github.com/leodog896/svelte-reparent

reparent svelte

Last synced: 2 months ago
JSON representation

reparent elements with ease in svelte

• Host: GitHub
• URL: https://github.com/leodog896/svelte-reparent
• Owner: LeoDog896
• License: mit
• Created: 2023-09-07T19:15:40.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-22T18:12:47.000Z (about 1 year ago)
• Last Synced: 2024-10-16T11:34:20.632Z (3 months ago)
• Topics: reparent, svelte
• Language: Svelte
• Homepage: https://leodog896.github.io/svelte-reparent/
• Size: 72.3 KB
• Stars: 16
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# [svelte-reparent](https://leodog896.github.io/svelte-reparent)

[![npm](https://img.shields.io/npm/v/svelte-reparent)](https://npmjs.com/svelte-reparent)

Reparent elements with ease. Svelte non-internal using alternative to [react-reparenting](https://github.com/paol-imi/react-reparenting).

## Example

(See it on [Svelte REPL](https://svelte.dev/repl/0ebf76d9cbb347fd8c2639f3c3825eba?version=4.2.1)!)

```svelte

	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'));

	

		

	

	


		
Container A

		

		Move Component Here

	

	


		
Container B

		

		Move Component Here

	


```

## Features

- No need to worry about keeping state in sync between components.

- Ownership model prevents bugs where components are destroyed while still in use.

- No dependencies on internal svelte APIs, unlike React and Vue alternatives.

- Simple API with only three exported functions.

Since this library is relatively new, there may be bugs. (Please report them! Every bug report helps!)

## Alternatives

If you're trying to teleport a node to a different location in the DOM, you can use

[svelte-portal](https://npmjs.com/package/svelte-portal) instead. This library

is better suited for teleporting _inside_ the svelte app, rather than outside.

## How it works

This library is split into three main concepts:

- `Limbo`, which serves as the "owner" of a component to be teleported.

- `Portal`, which serves as the "receiver" of a component to be teleported, and displays it.

- Teleportation, which transfers borrowship of a component from one `Portal` to another.

The `Limbo` component is the "root" component of the `Portal` component. There is a global

registry, which maps component instances to what portal ID they belong in. When a `Portal`

is destroyed, it is moved back to `Limbo` and removed from the registry.

In order to move the DOM around, this library extensively uses `
`.

The usage of this allows for `svelte-reparent` to _ensure_ that svelte components

have a single root element, which is moved around (in the case of `Limbo`), or

appended to (in the case of `Portal`).