{"id":15315857,"url":"https://github.com/wobsoriano/svelte-gesture","last_synced_at":"2025-04-15T02:19:38.190Z","repository":{"id":41227690,"uuid":"508628309","full_name":"wobsoriano/svelte-gesture","owner":"wobsoriano","description":"👇 Bread n butter utility for component-tied mouse/touch gestures in Svelte.","archived":false,"fork":false,"pushed_at":"2024-02-29T20:58:00.000Z","size":136,"stargazers_count":36,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-15T02:19:32.258Z","etag":null,"topics":["directive","drag","gestures","pinch","scroll","svelte","wheel","zoom"],"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/wobsoriano.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-29T09:33:27.000Z","updated_at":"2024-09-27T18:21:09.000Z","dependencies_parsed_at":"2023-01-27T15:16:16.634Z","dependency_job_id":null,"html_url":"https://github.com/wobsoriano/svelte-gesture","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":"wobsoriano/library-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wobsoriano%2Fsvelte-gesture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wobsoriano%2Fsvelte-gesture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wobsoriano%2Fsvelte-gesture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wobsoriano%2Fsvelte-gesture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wobsoriano","download_url":"https://codeload.github.com/wobsoriano/svelte-gesture/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248991568,"owners_count":21194895,"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":["directive","drag","gestures","pinch","scroll","svelte","wheel","zoom"],"created_at":"2024-10-01T08:52:35.080Z","updated_at":"2025-04-15T02:19:38.167Z","avatar_url":"https://github.com/wobsoriano.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-gesture\n\n[![npm (tag)](https://img.shields.io/npm/v/svelte-gesture?style=flat\u0026colorA=000000\u0026colorB=000000)](https://www.npmjs.com/package/svelte-gesture) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/svelte-gesture?style=flat\u0026colorA=000000\u0026colorB=000000) ![NPM](https://img.shields.io/npm/l/svelte-gesture?style=flat\u0026colorA=000000\u0026colorB=000000)\n\nsvelte-gesture is a library that lets you bind richer mouse and touch events to any component or view. With the data you receive, it becomes trivial to set up gestures, and often takes no more than a few lines of code.\n\nEach recognizer is implemented as an action that emits custom events. To make the most of it you should combine it with Svelte's [spring](https://svelte.dev/tutorial/spring) function.\n\n## Installation\n\n```bash\nnpm install svelte-gesture\n```\n\nTo get TypeScript working, add `svelte-gesture/globals` to the `types` field in your `tsconfig.json`\n\n```json\n{\n\t\"compilerOptions\": {\n\t\t\"types\": [\"svelte-gesture/globals\"]\n\t}\n}\n```\n\n## Usage\n\n```html\n\u003cscript\u003e\n\timport { spring } from 'svelte/motion';\n\timport { drag } from 'svelte-gesture';\n\n\tlet coords = spring({ x: 0, y: 0 });\n\n\tfunction handler({ detail }) {\n\t\tconst {\n\t\t\tactive,\n\t\t\tmovement: [mx, my]\n\t\t} = detail;\n\n\t\tcoords.set({\n\t\t\tx: active ? mx : 0,\n\t\t\ty: active ? my : 0\n\t\t});\n\t}\n\u003c/script\u003e\n\n\u003cdiv use:drag on:drag={handler} style:transform=\"translate({$coords.x}px, {$coords.y}px)\" /\u003e\n```\n\n### Simple example\n\n\u003cp align=\"middle\"\u003e\n  \u003ca href=\"https://stackblitz.com/edit/vitejs-vite-9squm1?file=src/App.svelte\"\u003e\u003cimg src=\"https://i.imgur.com/7myz7Tt.gif\" width=\"400\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nMore examples soon...\n\n## Actions\n\nsvelte-gesture exports several actions that can handle different gestures.\n\n| Action   | Description                                |\n| -------- | ------------------------------------------ |\n| `drag`   | Handles the drag gesture                   |\n| `move`   | Handles mouse move events                  |\n| `hover`  | Handles mouse enter and mouse leave events |\n| `scroll` | Handles scroll events                      |\n| `wheel`  | Handles wheel events                       |\n| `pinch`  | Handles the pinch gesture                  |\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwobsoriano%2Fsvelte-gesture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwobsoriano%2Fsvelte-gesture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwobsoriano%2Fsvelte-gesture/lists"}