{"id":24521809,"url":"https://github.com/hanielu/dnd-kit-svelte","last_synced_at":"2025-04-05T00:10:49.194Z","repository":{"id":271914096,"uuid":"914967420","full_name":"HanielU/dnd-kit-svelte","owner":"HanielU","description":"Svelte 5 dnd-kit port","archived":false,"fork":false,"pushed_at":"2025-02-19T01:34:58.000Z","size":648,"stargazers_count":88,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T23:06:03.322Z","etag":null,"topics":["dnd-kit","svelte","svelte5","svelte5-drag-drop","sveltejs","sveltekit"],"latest_commit_sha":null,"homepage":"https://dnd-kit-svelte.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HanielU.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-10T17:19:27.000Z","updated_at":"2025-03-26T08:44:28.000Z","dependencies_parsed_at":"2025-01-17T03:17:12.797Z","dependency_job_id":"c891b99b-cba2-4d77-ad77-39779be1eae8","html_url":"https://github.com/HanielU/dnd-kit-svelte","commit_stats":null,"previous_names":["hanielu/svelte-dnd-kit","hanielu/dnd-kit-svelte"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HanielU%2Fdnd-kit-svelte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HanielU%2Fdnd-kit-svelte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HanielU%2Fdnd-kit-svelte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HanielU%2Fdnd-kit-svelte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HanielU","download_url":"https://codeload.github.com/HanielU/dnd-kit-svelte/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247266565,"owners_count":20910836,"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":["dnd-kit","svelte","svelte5","svelte5-drag-drop","sveltejs","sveltekit"],"created_at":"2025-01-22T03:16:38.319Z","updated_at":"2025-04-05T00:10:49.174Z","avatar_url":"https://github.com/HanielU.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# dnd-kit-svelte\n\nA Svelte port of the powerful [@dnd-kit][dnd-kit] library - the modern, lightweight, performant, accessible and extensible drag \u0026 drop toolkit.\n\n## Quick start\n\nInstall it:\n\n```bash\nnpm i @dnd-kit-svelte/core\n# or\nyarn add @dnd-kit-svelte/core\n# or\npnpm add @dnd-kit-svelte/core\n```\n\n## Overview\n\nThis library provides a complete port of dnd-kit to Svelte, maintaining feature parity with the original React implementation while adapting to Svelte's reactivity system. All documentation and APIs from the [original dnd-kit][dnd-kit-docs] library apply here, with some Svelte-specific adaptations.\n\n## Examples\n\n- [Sortable Tasks List](sites/docs/src/lib/components/examples/sortable/sortable-list.svelte)\n- [Nested Sortable List](sites/docs/src/lib/components/examples/nested/draggable-containers.svelte)\n- [Basic Drag \u0026 Drop](sites/docs/src/lib/components/examples/basic/basic.svelte)\n\n## Key Differences from React Implementation\n\nThe main difference lies in how reactive values are handled. Since Svelte components don't rerender the same way React components do, we've adapted the API to work with Svelte's reactivity system.\n\n### Using Functions for Reactive Values\n\nIn hooks like `useSortable`, `useDraggable`, etc., you can pass a function to any field that needs to be reactive. The function will be called whenever the value needs to be accessed, ensuring you always get the latest value from Svelte's reactive scope.\n\nExample:\n\n```ts\n// React dnd-kit\nimport {useSortable} from '@dnd-kit/sortable';\n\nuseSortable({\n\tid: item.id,\n\tdata: item,\n});\n\n// Svelte dnd-kit\nimport {useSortable} from '@dnd-kit-svelte/sortable';\n\nuseSortable({\n\t// Static value\n\tid: item.id,\n\t// Reactive value using a function\n\tdata: () =\u003e item, // Access reactive state value\n});\n```\n\n### Data returned from hooks\n\nIn React, components re-render when their state changes, so hooks can return values directly. However, since Svelte components don't re-render, all non-function properties returned from hooks use a `.current` getter to ensure you always access the latest value.\n\nExample:\n\n```ts\n// React dnd-kit\nconst { attributes, listeners, isDragging } = useSortable({ id });\n\n\u003cdiv {...attributes} {...listeners}\u003e\n  {isDragging ? 'Dragging' : 'Not dragging'}\n\u003c/div\u003e\n\n// Svelte dnd-kit\nconst { attributes, listeners, isDragging } = useSortable({ id });\n\n\u003cdiv {...attributes.current} {...listeners.current}\u003e\n  {isDragging.current ? 'Dragging' : 'Not dragging'}\n\u003c/div\u003e\n```\n\nThis pattern is used consistently across all hooks:\n\n- `useDraggable`\n- `useDroppable`\n- `useSortable`\n\nProperties that use `.current` include:\n\n- State values (`isDragging`, `isOver`, etc.)\n- DOM attributes (`attributes`, `listeners`)\n- Transform and transition values\n- Node references\n\n## Core Concepts\n\nAll core concepts from dnd-kit remain the same:\n\n- Draggable elements\n- Droppable areas\n- DndContext provider\n- Sensors\n- Modifiers\n- Collision detection\n\nFor detailed documentation on these concepts, please refer to the [original dnd-kit documentation][dnd-kit-docs].\n\n## License\n\nMIT © [Haniel Ubogu](https://github.com/HanielU)\n\n[dnd-kit]: https://github.com/clauderic/dnd-kit\n[dnd-kit-docs]: https://docs.dndkit.com/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhanielu%2Fdnd-kit-svelte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhanielu%2Fdnd-kit-svelte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhanielu%2Fdnd-kit-svelte/lists"}