{"id":15493330,"url":"https://github.com/harrel56/use-sortablejs","last_synced_at":"2025-04-22T19:46:46.346Z","repository":{"id":53382738,"uuid":"521395314","full_name":"harrel56/use-sortablejs","owner":"harrel56","description":"SortableJS ported to React hooks","archived":false,"fork":false,"pushed_at":"2025-04-09T19:01:50.000Z","size":648,"stargazers_count":6,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-09T20:21:01.508Z","etag":null,"topics":["drag","drag-and-drop","react","sortablejs"],"latest_commit_sha":null,"homepage":"https://harrel56.github.io/use-sortablejs/","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/harrel56.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}},"created_at":"2022-08-04T19:43:36.000Z","updated_at":"2025-04-09T19:01:48.000Z","dependencies_parsed_at":"2023-11-27T18:31:35.372Z","dependency_job_id":"49ce5a94-22da-409c-b134-201e3249abb2","html_url":"https://github.com/harrel56/use-sortablejs","commit_stats":{"total_commits":76,"total_committers":2,"mean_commits":38.0,"dds":"0.013157894736842146","last_synced_commit":"7c5c93abafe3901ad2c4cf98e74f848cb372be3e"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harrel56%2Fuse-sortablejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harrel56%2Fuse-sortablejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harrel56%2Fuse-sortablejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harrel56%2Fuse-sortablejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/harrel56","download_url":"https://codeload.github.com/harrel56/use-sortablejs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250311740,"owners_count":21409877,"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":["drag","drag-and-drop","react","sortablejs"],"created_at":"2024-10-02T08:05:28.305Z","updated_at":"2025-04-22T19:46:46.281Z","avatar_url":"https://github.com/harrel56.png","language":"TypeScript","readme":"# use-sortablejs\n\n[SortableJS](https://github.com/SortableJS/Sortable) ported to React hooks.\n\nDemo: https://harrel56.github.io/use-sortablejs\n\n[![build actions status](https://github.com/harrel56/use-sortablejs/actions/workflows/build.yml/badge.svg)](https://github.com/harrel56/use-sortablejs/actions/workflows/build.yml)\n\n[![npm](https://badgen.net/npm/v/use-sortablejs)](https://www.npmjs.com/package/use-sortablejs)\n[![license](https://badgen.net/npm/license/use-sortablejs)](https://github.com/harrel56/use-sortablejs/blob/master/LICENSE)\n[![types](https://badgen.net/npm/types/use-sortablejs)](https://www.npmjs.com/package/use-sortablejs)\n[![minified size](https://img.shields.io/bundlephobia/min/use-sortablejs)](https://bundlephobia.com/package/use-sortablejs)\n[![minzip size](https://img.shields.io/bundlephobia/minzip/use-sortablejs)](https://bundlephobia.com/package/use-sortablejs)\n\nCreated to serve as a refreshed alternative to [react-sortablejs](https://github.com/SortableJS/react-sortablejs),\nwith hook design inspired by [@mui/base](https://www.npmjs.com/package/@mui/base).\n\n## Installation\n\nCurrently, package is only available as ES module.\n\n```sh\nnpm i use-sortablejs\n```\n\nContains no external dependencies, only peer dependencies:\n\n+ `react`: `^17.0.0 || ^18.0.0`\n+ `sortablejs`: `^1.0.0`\n+ `@types/react`: `^17.0.0 || ^18.0.0`\n+ `@types/sortablejs`: `^1.0.0`\n\nPackage exports:\n\n+ `SortableProvider`: sortable context provider,\n+ `useSortable`: main hook which requires access to sortable context\n+ and typescript definitions.\n\nSupports:\n\n+ all basic functionalities from `SortableJS`,\n+ swap plugin (you have to mount it yourself)\n+ and multidrag plugin (you have to mount it yourself).\n\n## Usage\n\nBefore using `useSortable` hook, it's required to wrap your application with `SortableProvider`.\nPreferably, there should be only one `SortableProvider` per whole application, but it's not mandatory.\nNevertheless, interactions between two sortables in separate contexts have undefined behaviour.\n\nExample:\n\n```tsx\n// App.tsx\nimport {SortableProvider} from 'use-sortablejs'\nimport List from './List'\n\nconst App = () =\u003e {\n  return (\n    \u003cSortableProvider\u003e\n      \u003cList/\u003e\n    \u003c/SortableProvider\u003e\n  )\n}\n```\n\n```tsx\n// List.tsx\nimport {useState} from 'react'\nimport {useSortable} from 'use-sortablejs'\n\nconst List = () =\u003e {\n  const [items, setItems] = useState([\n    'Item 1',\n    'Item 2',\n    'Item 3',\n    'Item 4',\n    'Item 5'\n  ])\n  const {getRootProps, getItemProps} = useSortable({setItems, options: {animation: 150}})\n  return (\n    \u003cdiv {...getRootProps()}\u003e\n      {items.map(item =\u003e \u003cdiv key={item} {...getItemProps(item)}\u003e{item}\u003c/div\u003e)}\n    \u003c/div\u003e\n  )\n}\n```\nWhere item type can be possibly anything (primitive, object of any shape, function).\n\n## Details\n\nAll types definitions can be found in this [file](https://github.com/harrel56/use-sortablejs/blob/master/src/types.ts).\n\n`useSortable` takes `UseSortableProps` parameter, which is an object containing:\n1. `setItems`: `Dispatch\u003cSetStateAction\u003cT[]\u003e\u003e`, where `T` is your item type. In most cases this should be a `setState` function returned from React `useState` hook.\n2. `options`: `ExtendedOptions\u003cT\u003e`, options object which you would normally pass to `Sortable.create()`.\n3. *(optional)* `cloneItem`: `(item: T) =\u003e T`, clone function to perform when item is being cloned. Defaults to internal shallow clone function.\n4. *(optional)* `sortableRef`: `LegacyRef\u003cSortable\u003e`, ref object or ref callback, which will be set/called with created `Sortable` object - set to `null` on dismount.\n\nAdditionally, all event functions that you pass to `options` object will have access to extended event object (`SortableEventExtended\u003cT\u003e`),\nwhich contains additional field `stateItem`, which corresponds to dragged item state and is directly mapped from `item` field.\n\n### Using `sortableRef`\n\nLeveraging `options` reactivity is the preferred way of achieving dynamic changes to `Sortable` object, but if you need more control `sortableRef` is the way to go.\n\n```ts\nconst myRef = useRef\u003cSortable\u003e(null)\nconst {getRootProps, getItemProps} = useSortable({setItems, sortableRef: myRef})\n```\n```ts\nconst myCallbackRef = (sortable: Sortable | null) =\u003e {\n  sortable?.option('sort', false)\n}\nconst {getRootProps, getItemProps} = useSortable({setItems, sortableRef: myCallbackRef})\n```\n\n## Constraints\n\n1. Each direct child of node with `getRootProps()` should have set props from `getItemProps(item)`.\n2. Each direct child of node with `getRootProps()` should contain unique `key` prop (**NOT** list index).\n3. `setItems` function should cause rerender of sortable list to reflect items state.\n\nBehaviour is undefined if any of these constraints is not met.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharrel56%2Fuse-sortablejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fharrel56%2Fuse-sortablejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharrel56%2Fuse-sortablejs/lists"}