Svelte Put

Overview:

The @svelte-put library includes multiple packages that provide useful functionality for Svelte projects. These packages have self-managed release cycles and are listed below. Each package offers a specific feature, such as avatar components, click outside events, copying text to clipboard, drag-to-scroll behavior, and more. The library also includes documentation for each package, making it easy to understand and implement these features in your Svelte projects.

Features:

• @svelte-put/avatar: Provides components and utilities for avatar images.
• @svelte-put/clickoutside: Triggers an event when clicking outside a specific node.
• @svelte-put/copy: Allows copying text to the clipboard.
• @svelte-put/dragscroll: Adds drag-to-scroll behavior to elements.
• @svelte-put/intersect: A wrapper for IntersectionObserver, useful for tracking when an element enters or exits the viewport.
• @svelte-put/inline-svg: Dynamically inserts SVGs into the DOM.
• @svelte-put/lockscroll: Locks the scroll and hides the scrollbar on a specific element.
• @svelte-put/modal: Builds type-safe asynchronous modals.
• @svelte-put/movable: Allows moving a node when it’s clicked or dragged.
• @svelte-put/noti: Builds type-safe and headless asynchronous notification components.
• @svelte-put/preprocess-auto-slug: Automatically adds an ID and anchor to selected nodes during Svelte preprocessing.

Installation:

To install the @svelte-put library and its packages, you can use npm. Open your project’s terminal and run the following command:

npm install @svelte-put

After the installation is complete, you can import the specific packages you need in your Svelte components:

import { Avatar, ClickOutside, Copy, Dragscroll } from '@svelte-put';

Refer to the documentation for each package to learn more about its usage and available options.

Summary:

The @svelte-put library provides a collection of useful packages for Svelte projects. These packages cover various functionalities, such as avatar components, click outside events, copying text to clipboard, and more. With clear documentation and easy installation, integrating these packages into your Svelte project is straightforward. Whether you need to enhance user interactions or add specific behaviors to elements, @svelte-put can be a valuable addition to your Svelte toolkit.