reparent nodes with ease in svelte
npm install svelte-reparentReparent elements with ease. Svelte non-internal using alternative to react-reparenting.
``svelte
Container A
Container B
`
- No need to worry about keeping state in sync between components.
- 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!)
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.Portal
- Teleportation, which transfers borrowship of a component from one to another.
The Limbo component is the "root" component of the Portal component. There is a globalPortal
registry, which maps component instances to what portal ID they belong in. When a
is destroyed, it is moved back to 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`).