{"id":27976866,"url":"https://github.com/mfuu/react-virtual-sortable","last_synced_at":"2025-05-08T01:41:23.612Z","repository":{"id":57347424,"uuid":"449168262","full_name":"mfuu/react-virtual-sortable","owner":"mfuu","description":"A virtual scrolling list component that can be sorted by dragging","archived":false,"fork":false,"pushed_at":"2025-04-13T12:33:40.000Z","size":2438,"stargazers_count":5,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-13T20:49:37.690Z","etag":null,"topics":["big-data","bigdata","dnd","drag","drag-and-drop","draggable","drop","list","reactjs","sort","sortable","virtual","virtual-list"],"latest_commit_sha":null,"homepage":"https://mfuu.github.io/react-virtual-drag-list/","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/mfuu.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,"zenodo":null}},"created_at":"2022-01-18T06:32:39.000Z","updated_at":"2025-04-13T12:25:52.000Z","dependencies_parsed_at":"2025-04-13T13:33:25.916Z","dependency_job_id":null,"html_url":"https://github.com/mfuu/react-virtual-sortable","commit_stats":null,"previous_names":["mfuu/react-virtual-drag-list"],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Freact-virtual-sortable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Freact-virtual-sortable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Freact-virtual-sortable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Freact-virtual-sortable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mfuu","download_url":"https://codeload.github.com/mfuu/react-virtual-sortable/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252983761,"owners_count":21835758,"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":["big-data","bigdata","dnd","drag","drag-and-drop","draggable","drop","list","reactjs","sort","sortable","virtual","virtual-list"],"created_at":"2025-05-08T01:41:23.135Z","updated_at":"2025-05-08T01:41:23.584Z","avatar_url":"https://github.com/mfuu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-virtual-sortable\n\n[![npm](https://img.shields.io/npm/v/react-virtual-sortable.svg)](https://www.npmjs.com/package/react-virtual-sortable)  [![npm](https://img.shields.io/npm/dm/react-virtual-sortable.svg)](https://www.npmjs.com/package/react-virtual-sortable)  [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](LICENSE)\n\nA virtual scrolling list component that can be sorted by dragging\n\n### [Live Demo](https://mfuu.github.io/react-virtual-sortable/)\n\n## Simple Usage\n\n```bash\nnpm i react-virtual-sortable\n```\n\nRoot component:\n```jsx\nimport VirtualList from 'react-virtual-sortable';\n\nfunction Virtual() {\n\n  const [list, setList] = useState([{id: '1', text: 'a'}, {id: '2', text: 'b'}, ...]);\n\n  const onDrop = (event) =\u003e {\n    // dnd complete\n    setList(() =\u003e event.list);\n  }\n\n  // use style and className as jsx used\n  return (\n    \u003cVirtualList\n      className=\"virtual-list\"\n      style={{ height: '500px' }}\n      dataKey=\"id\"\n      dataSource={ list }\n      handle=\".handle\"\n      header={ \u003cdiv className=\"loading\"\u003etop loading...\u003c/div\u003e }\n      footer={ \u003cdiv className=\"loading\"\u003ebottom loading...\u003c/div\u003e }\n      onDrop={ onDrop }\n    \u003e\n      {\n        (record, index, dataKey) =\u003e {\n          return (\n            \u003cdiv\u003e\n              \u003cspan className=\".handle\"\u003e{ index }\u003c/span\u003e\n              { record.text }\n            \u003c/div\u003e\n          )\n        }\n      }\n    \u003c/VirtualList\u003e\n  )\n}\n```\n\n## Props\n\n**Callback**\n\n| **Emit**   | **Type**   | **Default** | **Description**                         |\n| ---------- | ---------- | ----------- | --------------------------------------- |\n| `onTop`    | `Function` | -           | Scrolling to the top of the scroller    |\n| `onBottom` | `Function` | -           | Scrolling to the bottom of the scroller |\n| `onDrag`   | `Function` | -           | Drag is started                         |\n| `onDrop`   | `Function` | -           | Drag is complete                        |\n\n**Required props**\n| **Prop**     | **Type** | **Default** | **Description**                                                       |\n| ------------ | -------- | ----------- | --------------------------------------------------------------------- |\n| `dataKey`    | `String` | -           | The unique identifier of each piece of data, in the form of `'a.b.c'` |\n| `dataSource` | `Array`  | `[]`        | The data that needs to be rendered                                    |\n\n**Common used**\n\n| **Prop**       | **Type**                  | **Default** | **Description**                                                                                                  |\n| -------------- | ------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------- |\n| `header`       | `JSX.Element`             | -           | Top of list                                                                                                      |\n| `footer`       | `JSX.Element`             | -           | Bottom of list                                                                                                   |\n| `size`         | `Number`                  | -           | Estimated height of each row. You can choose to pass it or not, it will be automatically calculated              |\n| `keeps`        | `Number`                  | `30`        | The number of lines rendered by the virtual scroll                                                               |\n| `handle`       | `String`                  | -           | Drag handle selector within list items                                                                           |\n| `group`        | `Object/String`           | -           | string: 'name' or object: `{ name: 'group', put: true/false, pull: true/false/'clone', revertDrag: true/false }` |\n| `scroller`     | `Document \\| HTMLElement` | -           | Virtual list scrolling element                                                                                   |\n| `direction`    | `vertical \\| horizontal`  | `vertical`  | Scroll direction                                                                                                 |\n| `debounceTime` | `Number`                  | `0`         | debounce time on scroll                                                                                          |\n| `throttleTime` | `Number`                  | `0`         | debounce time on scroll                                                                                          |\n| `tableMode`    | `Boolean`                 | `false`     | display with table and tbody                                                                                     |\n\n**Uncommonly used**\n\n| **Prop**           | **Type**  | **Default**               | **Description**                                                             |\n| ------------------ | --------- | ------------------------- | --------------------------------------------------------------------------- |\n| `draggable`        | `String`  | `[role=\"item\"]`           | Specifies which items inside the element should be draggable                |\n| `sortable`         | `Boolean` | `true`                    | Whether the current list can be sorted by dragging                          |\n| `lockAxis`         | `x \\| y`  | `-`                       | Axis on which dragging will be locked                                       |\n| `keepOffset`       | `Boolean` | `false`                   | When scrolling up to load data, keep the same offset as the previous scroll |\n| `disabled`         | `Boolean` | `false`                   | Disables the sortable if set to true                                        |\n| `animation`        | `Number`  | `150`                     | Drag-and-drop's animation delay                                             |\n| `autoScroll`       | `Boolean` | `true`                    | Automatic scrolling when moving to the edge of the container                |\n| `scrollSpeed`      | `Object`  | `{ x: 10, y: 10 }`        | Vertical\u0026Horizontal scrolling speed (px)                                    |\n| `scrollThreshold`  | `Number`  | `55`                      | Threshold to trigger autoscroll                                             |\n| `delay`            | `Number`  | `0`                       | Time in milliseconds to define when the sorting should start                |\n| `delayOnTouchOnly` | `Boolean` | `false`                   | Only delay on press if user is using touch                                  |\n| `fallbackOnBody`   | `Boolean` | `false`                   | Appends the ghost element into the document's body                          |\n| `rootTag`          | `String`  | `div`                     | Label type for root element                                                 |\n| `wrapTag`          | `String`  | `div`                     | Label type for list wrap element                                            |\n| `wrapStyle`        | `Object`  | `{}`                      | List wrapper element style                                                  |\n| `wrapClass`        | `String`  | `''`                      | List wrapper element class                                                  |\n| `ghostStyle`       | `Object`  | `{}`                      | The style of the mask element when dragging                                 |\n| `ghostClass`       | `String`  | `''`                      | The class of the mask element when dragging                                 |\n| `chosenClass`      | `String`  | `''`                      | Class name for the chosen item                                              |\n| `placeholderClass` | `String`  | `''`                      | Class name for the drop placeholder                                         |\n\n## Methods\nUse the methods exposed in the component by setting `ref`\n```jsx\n...\n\nconst virtualRef = useRef();\n\nconst scrollToBottom = () =\u003e {\n  virtualRef.current.scrollToBottom();\n}\n\nreturn (\n  \u003cbutton onClick={ scrollToBottom }\u003e\u003c/button\u003e\n  \u003cvirtualList\n    ref={ virtualRef }\n    ...\n  \u003e\n    {\n      (record) =\u003e \u003cdiv\u003e{ record.text }\u003c/div\u003e\n    }\n  \u003c/virtualList\u003e\n)\n```\n\n| **Prop**                 | **Description**                                            |\n| ------------------------ | ---------------------------------------------------------- |\n| `getSize(key)`           | get the height of the specified item by key value          |\n| `getOffset()`            | get the current scroll top/left                            |\n| `getClientSize()`        | Get wrapper element client viewport size (width or height) |\n| `getScrollSize()`        | Get all scroll size (scrollHeight or scrollWidth)          |\n| `scrollToTop()`          | scroll to the top of the list                              |\n| `scrollToBottom()`       | scroll to the bottom of the list                           |\n| `scrollToKey(key)`       | scroll to the specified data-key                           |\n| `scrollToIndex(index)`   | scroll to the specified index value                        |\n| `scrollToOffset(offset)` | scroll to the specified height                             |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfuu%2Freact-virtual-sortable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmfuu%2Freact-virtual-sortable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfuu%2Freact-virtual-sortable/lists"}