{"id":23183633,"url":"https://github.com/svecosystem/svelte-interactions","last_synced_at":"2025-08-18T15:31:55.425Z","repository":{"id":215715055,"uuid":"739626887","full_name":"svecosystem/svelte-interactions","owner":"svecosystem","description":"Interactions, streamlined. ⌨️","archived":false,"fork":false,"pushed_at":"2024-02-07T20:41:06.000Z","size":99,"stargazers_count":113,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-12-13T17:48:10.361Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/svecosystem.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":["huntabyte"],"patreon":null,"open_collective":null,"ko_fi":"huntabyte","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2024-01-06T03:41:45.000Z","updated_at":"2024-12-09T22:04:40.000Z","dependencies_parsed_at":"2024-01-09T03:26:38.524Z","dependency_job_id":"8d662689-74e7-4bdf-93fc-2bebe792085c","html_url":"https://github.com/svecosystem/svelte-interactions","commit_stats":null,"previous_names":["huntabyte/svelte-interactions"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svecosystem%2Fsvelte-interactions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svecosystem%2Fsvelte-interactions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svecosystem%2Fsvelte-interactions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svecosystem%2Fsvelte-interactions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/svecosystem","download_url":"https://codeload.github.com/svecosystem/svelte-interactions/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230245302,"owners_count":18196134,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-18T09:13:48.194Z","updated_at":"2024-12-18T09:13:48.877Z","avatar_url":"https://github.com/svecosystem.png","language":"TypeScript","funding_links":["https://github.com/sponsors/huntabyte","https://ko-fi.com/huntabyte"],"categories":[],"sub_categories":[],"readme":"# Svelte Interactions\n\nAt surface level, interactions may seem like a simple concept, but once you start peeling back the onion they are quite complex. For something as simple as a button to behave properly across all browsers and devices, you need more than just a `click` event handler.\n\nIf you aren't convinced, it's highly recommended to read [this three-part blog post](https://react-spectrum.adobe.com/blog/building-a-button-part-1.html), which goes into detail about the complexities of interactions.\n\nThis project is heavily inspired by that article and contains a ton of code derived from [React Aria's](https://react-spectrum.adobe.com) Interactions packages. It aims to provide a similar API for Svelte, in the form of [Svelte Actions](https://svelte.dev/docs/svelte-action) and eventually spreadable event attributes (once Svelte 5 is released).\n\nWhile this project is still in its infancy, it'll be documented here. It will eventually get a dedicated website, but for now this will have to do.\n\n## Installation\n\n```bash\nnpm install svelte-interactions\n```\n\n## Table of Contents\n\n- [Press Interaction](#press-interaction)\n- [Long Press Interaction](#long-press-interaction)\n- [Hover Interaction](#hover-interaction)\n- [Move Interaction](#move-interaction)\n\n## Press Interaction\n\nThe `press` interaction is used to implement buttons, links, and other pressable elements. It handles mouse, touch, and keyboard interactions, and ensures that the element is accessible to screen readers and keyboard users.\n\nNo more having to wrangle all those event handlers yourself! Just and use the `press` action along with the different `PressEvents` to provide a consistent experience across all browsers and devices.\n\n#### Basic Usage\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { createPress } from 'svelte-interactions';\n\n\tconst { pressAction } = createPress();\n\u003c/script\u003e\n\n\u003cbutton\n\tuse:pressAction\n\ton:press={(e) =\u003e {\n\t\tconsole.log('you just pressed a button!', e);\n\t}}\n\u003e\n\tPress Me\n\u003c/button\u003e\n```\n\n\u003cdetails\u003e\n    \u003csummary\u003e\n        \u003cspan\u003e createPress \u003c/span\u003e\n    \u003c/summary\u003e\n\nCreates a new `press` interaction instance. Each element should have its own instance, as it maintains state for a single element. For example, if you had multiple buttons on a page:\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { createPress } from 'svelte-interactions';\n\n\tconst { pressAction: pressOne } = createPress();\n\tconst { pressAction: pressTwo } = createPress();\n\u003c/script\u003e\n\n\u003cbutton use:pressOne on:press\u003e Button One \u003c/button\u003e\n\u003cbutton use:pressTwo on:press\u003e Button Two \u003c/button\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003e\n        \u003cspan\u003ePressConfig\u003c/span\u003e\n    \u003c/summary\u003e\n\n`createPress` takes in an optional `PressConfig` object, which can be used to customize the interaction.\n\n```ts\nimport { createPress } from 'svelte-interactions';\n\nconst { pressAction } = createPress({ isDisabled: true });\n```\n\n```ts\ntype PressConfig = PressHandlers \u0026 {\n\t/**\n\t * Whether the target is in a controlled press state\n\t * (e.g. an overlay it triggers is open).\n\t *\n\t * @default false\n\t */\n\tisPressed?: boolean;\n\n\t/**\n\t * Whether the press events should be disabled.\n\t *\n\t * @default false\n\t */\n\tisDisabled?: boolean;\n\n\t/**\n\t * Whether the target should not receive focus on press.\n\t *\n\t * @default false\n\t */\n\tpreventFocusOnPress?: boolean;\n\n\t/**\n\t * Whether press events should be canceled when the pointer\n\t * leaves the target while pressed. By default, this is\n\t * `false`, which means if the pointer returns back over\n\t * the target while pressed, `pressstart`/`onPressStart`\n\t * will be fired again. If set to `true`, the press is\n\t * canceled when the pointer leaves the target and\n\t * `pressstart`/`onPressStart` will not be fired if the\n\t * pointer returns.\n\t *\n\t * @default false\n\t */\n\tshouldCancelOnPointerExit?: boolean;\n\n\t/**\n\t * Whether text selection should be enabled on the pressable element.\n\t */\n\tallowTextSelectionOnPress?: boolean;\n};\n```\n\nThe `PressConfig` object also includes handlers for all the different `PressHandlers`. These are provided as a convenience, should you prefer to handle the events here rather than the custom `on:press*` events dispatched by the element with the `pressAction`.\n\nBe aware that if you use these handlers, the custom `on:press*` events for whatever handlers you use will not be dispatched to the element. We only dispatch the events that aren't handled by the `PressHandlers`.\n\n```ts\ntype PressHandlers = {\n\t/**\n\t * Handler called when the press is released over the target.\n\t */\n\tonPress?: (e: PressEvent) =\u003e void;\n\n\t/**\n\t * Handler called when a press interaction starts.\n\t */\n\tonPressStart?: (e: PressEvent) =\u003e void;\n\n\t/**\n\t * Handler called when a press interaction ends, either over\n\t * the target or when the pointer leaves the target.\n\t */\n\tonPressEnd?: (e: PressEvent) =\u003e void;\n\n\t/**\n\t * Handler called when the press state changes.\n\t */\n\tonPressChange?: (isPressed: boolean) =\u003e void;\n\n\t/**\n\t * Handler called when a press is released over the target,\n\t * regardless of whether it started on the target or not.\n\t */\n\tonPressUp?: (e: PressEvent) =\u003e void;\n};\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003e\n        \u003cspan\u003ePressResult\u003c/span\u003e\n    \u003c/summary\u003e\n\nThe `createPress` function returns a `PressResult` object, which contains the `pressAction` action, and the `isPressed` state. More returned properties may be added in the future if needed.\n\n```ts\ntype PressResult = {\n\t/** Whether the target is currently pressed. */\n\tisPressed: Readable\u003cboolean\u003e;\n\t/** A Svelte Action which handles applying the event listeners to the element. */\n\tpressAction: (node: HTMLElement | SVGElement) =\u003e PressActionReturn;\n};\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003e\n        \u003cspan\u003eCustomEvent\u003c/span\u003e\n    \u003c/summary\u003e\n\nWhen you apply the `pressAction` to an element, it will dispatch custom `on:press*` events. You can use these or the `PressHandlers` to handle the various press events.\n\n```ts\ntype PressActionReturn = ActionReturn\u003c\n\tundefined,\n\t{\n\t\t/**\n\t\t * Dispatched when the press is released over the target.\n\t\t */\n\t\t'on:press'?: (e: CustomEvent\u003cPressEvent\u003e) =\u003e void;\n\n\t\t/**\n\t\t * Dispatched when a press interaction starts.\n\t\t */\n\t\t'on:pressstart'?: (e: CustomEvent\u003cPressEvent\u003e) =\u003e void;\n\n\t\t/**\n\t\t * Dispatched when a press interaction ends, either over\n\t\t * the target or when the pointer leaves the target.\n\t\t */\n\t\t'on:pressend'?: (e: CustomEvent\u003cPressEvent\u003e) =\u003e void;\n\n\t\t/**\n\t\t * Dispatched when a press is released over the target,\n\t\t * regardless of whether it started on the target or not.\n\t\t */\n\t\t'on:pressup'?: (e: CustomEvent\u003cPressEvent\u003e) =\u003e void;\n\t}\n\u003e;\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003e\n        \u003cspan\u003ePressEvent\u003c/span\u003e\n    \u003c/summary\u003e\n\nThis is the event object dispatched by the custom `on:press*` events, and is also passed to the `PressHandlers` should you choose to use them.\n\n```ts\ntype PointerType = 'mouse' | 'pen' | 'touch' | 'keyboard' | 'virtual';\n\ninterface PressEvent {\n\t/** The type of press event being fired. */\n\ttype: 'pressstart' | 'pressend' | 'pressup' | 'press';\n\n\t/** The pointer type that triggered the press event. */\n\tpointerType: PointerType;\n\n\t/** The target element of the press event. */\n\ttarget: Element;\n\n\t/** Whether the shift keyboard modifier was held during the press event. */\n\tshiftKey: boolean;\n\n\t/** Whether the ctrl keyboard modifier was held during the press event. */\n\tctrlKey: boolean;\n\n\t/** Whether the meta keyboard modifier was held during the press event. */\n\tmetaKey: boolean;\n\n\t/** Whether the alt keyboard modifier was held during the press event. */\n\taltKey: boolean;\n\n\t/**\n\t * By default, press events stop propagation to parent elements.\n\t * In cases where a handler decides not to handle a specific event,\n\t * it can call `continuePropagation()` to allow a parent to handle it.\n\t */\n\tcontinuePropagation(): void;\n}\n```\n\n\u003c/details\u003e\n\n## Long Press Interaction\n\nThe `hover` interaction provides an API for consistent long press behavior across all browsers and devices, with support for a custom time threshold and accessible description.\n\n#### Basic Usage\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { createLongPress } from 'svelte-interactions';\n\n\tconst { longPressAction } = createLongPress();\n\u003c/script\u003e\n\n\u003cbutton\n\tuse:longPressAction\n\ton:longpress={(e) =\u003e {\n\t\tconsole.log('you just long pressed a button!', e);\n\t}}\n\u003e\n\tLong Press Me\n\u003c/button\u003e\n```\n\n\u003cdetails\u003e\n    \u003csummary\u003e\n        \u003cspan\u003ecreateLongPress\u003c/span\u003e\n    \u003c/summary\u003e\n\nCreates a new `longpress` interaction instance. Each element should have its own instance, as it maintains state for a single element. For example, if you had multiple buttons on a page:\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { createLongPress } from 'svelte-interactions';\n\n\tconst { longPressAction: longPressOne } = createLongPress();\n\tconst { longPressAction: longPressTwo } = createLongPress();\n\u003c/script\u003e\n\n\u003cbutton use:longPressOne on:longpress\u003e Button One \u003c/button\u003e\n\u003cbutton use:longPressTwo on:longpress\u003e Button Two \u003c/button\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003e\n        \u003cspan\u003eLongPressConfig\u003c/span\u003e\n    \u003c/summary\u003e\n\n`createLongPress` takes in an optional `LongPressConfig` object, which can be used to customize the interaction.\n\n```ts\nimport { createLongPress } from 'svelte-interactions';\n\nconst { pressLongAction } = createPress({ isDisabled: true, threshold: 1000 });\n```\n\n```ts\ntype LongPressConfig = LongPressHandlers \u0026 {\n\t/**\n\t * Whether the long press events should be disabled\n\t */\n\tisDisabled?: boolean;\n\n\t/**\n\t * The amount of time (in milliseconds) to wait before\n\t * triggering a long press event.\n\t */\n\tthreshold?: number;\n\n\t/**\n\t * A description for assistive techology users indicating that a\n\t * long press action is available, e.g. \"Long press to open menu\".\n\t */\n\taccessibilityDescription?: string;\n};\n```\n\nThe `LongPressConfig` object also includes handlers for all the different `LongPressHandlers`. These are provided as a convenience, should you prefer to handle the events here rather than the custom `on:longpress*` events dispatched by the element with the `longPressAction`.\n\nBe aware that if you use these handlers, the custom `on:longpress*` events for whatever handlers you use will not be dispatched to the element. We only dispatch the events that aren't handled by the `LongPressHandlers`.\n\n```ts\nexport type LongPressHandlers = {\n\t/**\n\t * Handler that is called when a long press interaction starts.\n\t */\n\tonLongPressStart?: (e: LongPressEvent) =\u003e void;\n\n\t/**\n\t * Handler that is called when a long press interaction ends, either\n\t * over the target or when the pointer leaves the target.\n\t */\n\tonLongPressEnd?: (e: LongPressEvent) =\u003e void;\n\n\t/**\n\t * Handler that is called when the threshold time is met while\n\t * the press is over the target.\n\t */\n\tonLongPress?: (e: LongPressEvent) =\u003e void;\n};\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003e\n        \u003cspan\u003eLongPressResult\u003c/span\u003e\n    \u003c/summary\u003e\n\nThe `createLongPress` function returns a `LongPressResult` object, which contains the `longPressAction` action, and the `description` state. More returned properties may be added in the future if needed.\n\n```ts\ntype LongPressResult = {\n\t/**\n\t * A Svelte action which handles applying the event listeners\n\t * and dispatching events to the element\n\t */\n\tlongPressAction: (node: HTMLElement | SVGElement) =\u003e LongPressActionReturn;\n\n\t/**\n\t * A writable store to manage the accessible description for the long\n\t * press action. It's initially populated with the value passed to the\n\t * `accessibilityDescription` config option, but can be updated at any\n\t * time by calling `description.set()`, and the new description will\n\t * reflect in the DOM.\n\t */\n\taccessibilityDescription: Writable\u003cstring | undefined\u003e;\n};\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003e\n        \u003cspan\u003eCustom Events\u003c/span\u003e\n    \u003c/summary\u003e\n\nWhen you apply the `longPressAction` to an element, it will dispatch custom `on:longpress*` events for events you aren't handling via the `LongPressConfig` props. You can use these or the `LongPressHandlers` to handle the various `longpress` events.\n\n```ts\ntype LongPressActionReturn = ActionReturn\u003c\n\tundefined,\n\t{\n\t\t/**\n\t\t * Dispatched when the threshold time is met while\n\t\t * the press is over the target.\n\t\t */\n\t\t'on:longpress'?: (e: CustomEvent\u003cLongPressEvent\u003e) =\u003e void;\n\n\t\t/**\n\t\t * Dispatched when a long press interaction starts.\n\t\t */\n\t\t'on:longpressstart'?: (e: CustomEvent\u003cLongPressEvent\u003e) =\u003e void;\n\n\t\t/**\n\t\t * Dispatched when a long press interaction ends, either\n\t\t * over the target or when the pointer leaves the target.\n\t\t */\n\t\t'on:longpressend'?: (e: CustomEvent\u003cLongPressEvent\u003e) =\u003e void;\n\t}\n\u003e;\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003e\n        \u003cspan\u003ePressEvent\u003c/span\u003e\n    \u003c/summary\u003e\n\nThis is the event object dispatched by the custom `on:press*` events, and is also passed to the `PressHandlers` should you choose to use them.\n\n```ts\ntype PointerType = 'mouse' | 'pen' | 'touch' | 'keyboard' | 'virtual';\n\ninterface PressEvent {\n\t/** The type of longpress event being fired. */\n\ttype: 'longpressstart' | 'longpressend' | 'longpress';\n\n\t/** The pointer type that triggered the press event. */\n\tpointerType: PointerType;\n\n\t/** The target element of the press event. */\n\ttarget: Element;\n\n\t/** Whether the shift keyboard modifier was held during the press event. */\n\tshiftKey: boolean;\n\n\t/** Whether the ctrl keyboard modifier was held during the press event. */\n\tctrlKey: boolean;\n\n\t/** Whether the meta keyboard modifier was held during the press event. */\n\tmetaKey: boolean;\n\n\t/** Whether the alt keyboard modifier was held during the press event. */\n\taltKey: boolean;\n}\n```\n\n\u003c/details\u003e\n\n## Hover Interaction\n\nThe `hover` interaction provides an API for consistent hover behavior across all browsers and devices, ignoring emulated mouse events on touch devices.\n\n#### Basic Usage\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { createHover } from 'svelte-interactions';\n\n\tconst { hoverAction } = createHover();\n\u003c/script\u003e\n\n\u003cbutton\n\tuse:hoverAction\n\ton:hoverstart={(e) =\u003e {\n\t\tconsole.log('you just hovered me!', e);\n\t}}\n\ton:hoverend={(e) =\u003e {\n\t\tconsole.log('you just unhovered me!', e);\n\t}}\n\u003e\n\tPress Me\n\u003c/button\u003e\n```\n\n\u003cdetails\u003e\n    \u003csummary\u003e\n        \u003cspan\u003ecreateHover\u003c/span\u003e\n    \u003c/summary\u003e\n\nCreates a new `hover` interaction instance. Each element should have its own instance, as it maintains state for a single element. For example, if you had multiple elements you wanted to apply hover state to on a page:\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { createPress } from 'svelte-interactions';\n\n\tconst { hoverAction: hoverOne } = createHover();\n\tconst { hoverAction: hoverTwo } = createHover();\n\u003c/script\u003e\n\n\u003cdiv use:hoverOne on:hoverstart\u003eHoverable element one\u003c/div\u003e\n\u003cdiv use:hoverTwo on:hoverstart\u003eHoverable element two\u003c/div\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003e\n        \u003cspan\u003eHoverConfig\u003c/span\u003e\n    \u003c/summary\u003e\n\nThe `createHover` function takes in an optional `HoverConfig` object, which can be used to customize the interaction.\n\n```ts\nimport { createHover } from 'svelte-interactions';\n\nconst { hoverAction } = createHover({ isDisabled: true });\n```\n\n```ts\ntype HoverConfig = HoverHandlers \u0026 {\n\t/**\n\t * Whether the hover events should be disabled\n\t */\n\tisDisabled?: boolean;\n};\n```\n\nThe `HoverConfig` object also includes handlers for all the different `HoverHandlers`. These are provided as a convenience, should you prefer to handle the events here rather than the custom `on:hover*` events dispatched by the element with the `hoverAction`.\n\nBe aware that if you use these handlers, the custom `on:hover*` events for whatever handlers you use will not be dispatched to the element. We only dispatch the events that aren't handled by the `HoverHandlers`.\n\n```ts\ntype HoverHandlers = {\n\t/**\n\t * Handler called when a hover interaction starts.\n\t */\n\tonHoverStart?: (e: HoverEvent) =\u003e void;\n\n\t/**\n\t * Handler called when a hover interaction ends.\n\t */\n\tonHoverEnd?: (e: HoverEvent) =\u003e void;\n\n\t/**\n\t * Handler called when the hover state changes.\n\t */\n\tonHoverChange?: (isHovering: boolean) =\u003e void;\n};\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003e\n        \u003cspan\u003eHoverResult\u003c/span\u003e\n    \u003c/summary\u003e\n\nThe `createHover` function returns a `HoverResult` object, which contains the `hoverAction` action, and the `isHovering` state. More returned properties may be added in the future if needed.\n\n```ts\nexport type HoverResult = {\n\t/**\n\t * Whether the element is currently being hovered\n\t */\n\tisHovered: Readable\u003cboolean\u003e;\n\n\t/**\n\t * A Svelte action which handles applying the event listeners\n\t * to the element and dispatching the custom `on:hover*` events.\n\t */\n\thoverAction: (node: HTMLElement | SVGElement) =\u003e HoverActionReturn;\n};\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003e\n        \u003cspan\u003eCustom Events\u003c/span\u003e\n    \u003c/summary\u003e\n\nWhen you apply the `hoverAction` to an element, it will dispatch custom `on:hover*` events. You can use these or the `HoverHandlers` to handle the various hover events.\n\n```ts\ntype HoverActionReturn = ActionReturn\u003c\n\tundefined,\n\t{\n\t\t/**\n\t\t * Dispatched when a hover interaction starts.\n\t\t */\n\t\t'on:hoverstart'?: (e: CustomEvent\u003cHoverEvent\u003e) =\u003e void;\n\n\t\t/**\n\t\t * Dispatched when a hover interaction ends.\n\t\t */\n\t\t'on:hoverend'?: (e: CustomEvent\u003cHoverEvent\u003e) =\u003e void;\n\t}\n\u003e;\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003e\n        \u003cspan\u003eHoverEvent\u003c/span\u003e\n    \u003c/summary\u003e\n\nThis is the event object dispatched by the custom `on:hover*` events, and is also passed to the `HoverHandlers` should you choose to use them.\n\n```ts\ninterface HoverEvent {\n\t/** The type of hover event being fired. */\n\ttype: 'hoverstart' | 'hoverend';\n\t/** The pointer type that triggered the hover event. */\n\tpointerType: 'mouse' | 'pen';\n\t/** The target element of the hover event. */\n\ttarget: Element;\n}\n```\n\n\u003c/details\u003e\n\n## Move Interaction\n\nHandles `move` interactions across mouse, touch, and keyboard, including dragging with the mouse or touch, and using the arrow keys. Normalizes behavior across browsers and platforms, and ignores emulated mouse events on touch devices.\n\n#### Basic Usage\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { createMove } from 'svelte-interactions';\n\n\tconst { moveAction } = createMove();\n\u003c/script\u003e\n\n\u003cdiv\n\tuse:moveAction\n\ton:movestart={(e) =\u003e {\n\t\tconsole.log('you just started moving me!', e);\n\t}}\n\ton:moveend={(e) =\u003e {\n\t\tconsole.log('you just stopped moving me!', e);\n\t}}\n\u003e\n\tMoveable Area\n\u003c/div\u003e\n```\n\n\u003cdetails\u003e\n    \u003csummary\u003e\n        \u003cspan\u003ecreateMove\u003c/span\u003e\n    \u003c/summary\u003e\n\nCreates a new `press` interaction instance. Each element should have its own instance, as it maintains state for a single element. For example, if you had multiple buttons on a page:\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { createMove } from 'svelte-interactions';\n\n\tconst { moveAction } = createMove();\n\u003c/script\u003e\n\n\u003cdiv use:moveAction on:move\u003eMoveable Area\u003c/div\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003e\n        \u003cspan\u003eMoveConfig\u003c/span\u003e\n    \u003c/summary\u003e\n\n```ts\nexport type MoveConfig = MoveHandlers \u0026 {};\n```\n\nThe `MoveConfig` object also includes handlers for all the different `MoveHandlers`. These are provided as a convenience, should you prefer to handle the events here rather than the custom `on:move*` events dispatched by the element with the `moveAction`.\n\nBe aware that if you use these handlers, the custom `on:move*` events for whatever handlers you use will not be dispatched to the element. We only dispatch the events that aren't handled by the `MoveHandlers`.\n\n```ts\nexport type MoveHandlers = {\n\t/**\n\t * Handler that is called when a move interaction starts.\n\t */\n\tonMoveStart?: (e: MoveStartEvent) =\u003e void;\n\n\t/**\n\t * Handler that is called when a move interaction ends.\n\t */\n\tonMoveEnd?: (e: MoveEndEvent) =\u003e void;\n\n\t/**\n\t * Handler that is called when the element is moved.\n\t */\n\tonMove?: (e: MoveMoveEvent) =\u003e void;\n};\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003e\n        \u003cspan\u003eMoveResult\u003c/span\u003e\n    \u003c/summary\u003e\n\nThe `createMove` function returns a `MoveResult` object, which contains the `moveAction` action. More returned properties may be added in the future if needed.\n\n```ts\nexport type MoveResult = {\n\t/**\n\t * A Svelte action which handles applying the event listeners\n\t * and dispatching events to the element\n\t */\n\tmoveAction: (node: HTMLElement | SVGElement) =\u003e MoveActionReturn;\n};\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003e\n        \u003cspan\u003eCustom Events\u003c/span\u003e\n    \u003c/summary\u003e\n\nWhen you apply the `moveAction` to an element, it will dispatch custom `on:move*` events. You can use these or the `MoveHandlers` to handle the various move events.\n\n```ts\ntype MoveActionReturn = ActionReturn\u003c\n\tundefined,\n\t{\n\t\t'on:move'?: (e: CustomEvent\u003cMoveMoveEvent\u003e) =\u003e void;\n\t\t'on:movestart'?: (e: CustomEvent\u003cMoveStartEvent\u003e) =\u003e void;\n\t\t'on:moveend'?: (e: CustomEvent\u003cMoveEndEvent\u003e) =\u003e void;\n\t}\n\u003e;\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003e\n        \u003cspan\u003eMoveEvent\u003c/span\u003e\n    \u003c/summary\u003e\n\nThis is the event object dispatched by the custom `on:move*` events, and is also passed to the `MoveHandlers` should you choose to use them.\n\n```ts\nexport interface BaseMoveEvent {\n\t/** The pointer type that triggered the move event. */\n\tpointerType: PointerType;\n\n\t/** Whether the shift keyboard modifier was held during the move event. */\n\tshiftKey: boolean;\n\n\t/** Whether the ctrl keyboard modifier was held during the move event. */\n\tctrlKey: boolean;\n\n\t/** Whether the meta keyboard modifier was held during the move event. */\n\tmetaKey: boolean;\n\n\t/** Whether the alt keyboard modifier was held during the move event. */\n\taltKey: boolean;\n}\n\nexport interface MoveStartEvent extends BaseMoveEvent {\n\t/** The type of move event being fired. */\n\ttype: 'movestart';\n}\n\nexport interface MoveMoveEvent extends BaseMoveEvent {\n\t/** The type of move event being fired. */\n\ttype: 'move';\n\n\t/** The amount moved in the X direction since the last event. */\n\tdeltaX: number;\n\n\t/** The amount moved in the Y direction since the last event. */\n\tdeltaY: number;\n}\n\nexport interface MoveEndEvent extends BaseMoveEvent {\n\t/** The type of move event being fired. */\n\ttype: 'moveend';\n}\n\nexport type MoveEvent = MoveStartEvent | MoveMoveEvent | MoveEndEvent;\n```\n\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvecosystem%2Fsvelte-interactions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsvecosystem%2Fsvelte-interactions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvecosystem%2Fsvelte-interactions/lists"}