@svelteuidev/composables

SvelteUI Composables

Composables with useful actions and utility functions.

• Package includes functions that are used to build components in @svelteuidev/ scoped packages.
• You can use these functions in your applications with or without other @svelteuidev/ packages.

Documentation

See full documentation on the SvelteUI website

Installation

# With yarn
yarn add @svelteuidev/composables

# With npm
npm i @svelteuidev/composables

Included Composables

Actions:

• use-click-outside – Triggers a callback when a user clicks outside of a given element
• use-clipboard - Copies text to the clipboard when DOM element is clicked
• use-css-variable - Update css properties on the fly whenever some of their values change
• use-download - Causes a download to occur with a given Blob object
• use-focus - Calls focus on a node once mounted into the DOM
• use-hot-key - Calls focus on a node once mounted into the DOM
• use-lazy - Lazily attach properties to any DOM element when it is in the window
• use-long-press - Creates a longpress event when mousedown is above a duration in milliseconds
• use-page-leave - Prevent current tab from being closed by user
• use-persistent-tab - Render an element or component anywhere in the DOM
• use-portal - Call function when mouse leaves the page
• use-tab-leave - Call a function when the current tab is switched

Utils:

• useOs - Get the user's os
• useRafFn - Call a function on every requestAnimationFrame
• useHash - Generates a random hash with a specified prefix.
• useMousePosition - Get mouse position relative to viewport or given element
• useEyeDropper - Get access to a reactive EyeDropper API.
• useRegex - Get common regex patterns, add your own, or test them.
• useFocusWithin - Detect if any element within has focus.
• useViewportSize - Get viewport width and height.
• useBrowserContext - Get access to the reactive browser location API.

License

All svelteui packages have MIT license. All svelteui dependencies also have MIT license.