Svelte Popperjs

Overview

The svelte-popperjs is a library that provides functionality for integrating Popper (a popular positioning engine) into Svelte applications without the need for wrapper components or component bindings. Unlike other Popper libraries for Svelte, svelte-popperjs takes advantage of Svelte actions to simplify the process and minimize the number of DOM references in the script tag. It can be easily installed as a dev dependency and works well with popular Svelte bundlers like Rollup, Vite, and SvelteKit.

Features

• No Wrapper Components: svelte-popperjs eliminates the need for wrapper components by using Svelte actions.
• Simple Installation: Only requires the installation of svelte-popperjs as a dev dependency.
• Create Popper Actions: Provides a function createPopperActions that takes an optional options object and returns a pair of actions for the reference and popper elements.
• Updating Popper Options: Popper options can be set statically during the creation of the popper actions or dynamically on the content action.
• Virtual Elements Support: Supports virtual elements as reference nodes, even allowing reactive updates using Svelte stores.
• Accessing Popper Instance: Provides a way to access the raw Popper instance for manual recomputation of the popper’s position.

Installation

To install svelte-popperjs, add it as a dev dependency using the -D flag:

npm install -D svelte-popperjs

Summary

svelte-popperjs is a convenient and efficient library for integrating Popper into Svelte applications. It offers a simplified approach using Svelte actions, eliminating the need for wrapper components and reducing the number of DOM references. With easy installation and a range of features like dynamic popper options, virtual elements support, and access to the raw Popper instance, svelte-popperjs provides a seamless experience for positioning elements in Svelte applications.