Useful Svelte Components

Written 2020-11-10

Portals
- https://github.com/romkor/svelte-portal
- https://svelte.dev/repl/8364bc976f0c4ff9b83adf6e7a3c19fd?version=3.29.4
  - This one uses a keyed portal so that only one thing can populate the portal at a time. Seems like the best way to go
- Ended up using a combination of the REPL there and some of the older code that used svelte:component, which continues to be useful when a menu needs to open a component in a portal but also close itself.
Error Boundary
- https://github.com/hyperlab/svelte-error-boundary
Drag and Drop
- svelte-grid looks interesting here for flexible cases. Have to play around with it a bit to see how flexible it is in setting constraints on the dragging.
- https://github.com/isaacHagoel/svelte-dnd-action seems good for more traditional drag and drop
"Brush" style graph selection
- https://svelte.dev/repl/00f726facd434b978c737af2698e0dbc?version=3.12.1 is a native Svelte implementation. Seems kind of broken but can be useful as a starting point
- https://layercake.graphics/example/SyncedBrush is one example from LayerCake
List Management
- https://github.com/Skayo/svelte-tiny-virtual-list
- https://github.com/Skayo/svelte-infinite-loading

Thanks for reading! If you have any questions or comments, please send me a note on Twitter. And if you enjoyed this, I also have a newsletter where I send out interesting things I read and the occasional nature photo.