{"id":14969973,"url":"https://github.com/jakesidsmith/react-reorder","last_synced_at":"2026-04-07T04:32:02.794Z","repository":{"id":26147361,"uuid":"29592491","full_name":"JakeSidSmith/react-reorder","owner":"JakeSidSmith","description":"Drag \u0026 drop, touch enabled, reorderable / sortable list, React component","archived":false,"fork":false,"pushed_at":"2023-03-02T16:04:17.000Z","size":469,"stargazers_count":217,"open_issues_count":19,"forks_count":57,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-04T17:09:46.957Z","etag":null,"topics":["component","drag","drop","react","react-component","reactjs","reorder","sortable"],"latest_commit_sha":null,"homepage":"https://jakesidsmith.github.io/react-reorder/","language":"JavaScript","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/JakeSidSmith.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2015-01-21T14:10:55.000Z","updated_at":"2025-03-29T22:51:31.000Z","dependencies_parsed_at":"2023-07-13T15:43:48.225Z","dependency_job_id":null,"html_url":"https://github.com/JakeSidSmith/react-reorder","commit_stats":{"total_commits":85,"total_committers":4,"mean_commits":21.25,"dds":0.07058823529411762,"last_synced_commit":"0f8743ba2a7397377c1de48ade6f3efd7c631ac9"},"previous_names":["jakesidsmith/react-reorderable"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JakeSidSmith%2Freact-reorder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JakeSidSmith%2Freact-reorder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JakeSidSmith%2Freact-reorder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JakeSidSmith%2Freact-reorder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JakeSidSmith","download_url":"https://codeload.github.com/JakeSidSmith/react-reorder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247217222,"owners_count":20903009,"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":["component","drag","drop","react","react-component","reactjs","reorder","sortable"],"created_at":"2024-09-24T13:42:47.216Z","updated_at":"2025-12-12T03:01:03.213Z","avatar_url":"https://github.com/JakeSidSmith.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Reorder (v2)\n\n__Drag \u0026 drop, touch enabled, reorder / sortable list, React component__\n\nIf you are using v3 alpha, please refer to [this documentation](https://github.com/JakeSidSmith/react-reorder/blob/rework/README.md).\n\n## About\n\nReact Reorder is a React component that allows the user to drag-and-drop items in a list (horizontal / vertical) or a grid.\n\nIt fully supports touch devices and auto-scrolls when a component is being dragged (check out the demo, link below).\n\nIt also allows the user to set a hold time (duration before drag begins) allowing additional events like clicking / tapping to be applied.\n\nAlthough this project is very new, it has been thoroughly tested in all modern browsers (see supported browsers).\n\n__[Demo](http://jakesidsmith.github.io/react-reorder/)__\n\n## Installation\n\n* Using npm\n    ```shell\n    npm install react-reorder\n    ```\n    Add `--save` or `-S` to update your package.json\n\n* Using bower\n    ```shell\n    bower install react-reorder\n    ```\n    Add `--save` or `-S` to update your bower.json\n\n## Example\n\n1. If using requirejs: add `react-reorder` to your `require.config`\n\n    ```javascript\n    paths:\n      // \u003cname\u003e : \u003cpath/to/module\u003e\n      'react-reorder': 'react-reorder/reorder'\n    }\n    ```\n\n2. If using a module loader (requirejs / browserfiy / commonjs): require `react-reorder` where it will be used in your project\n\n    ```javascript\n    var Reorder = require('react-reorder');\n    ```\n\n    If using requirejs you'll probably want to wrap your module e.g.\n\n    ```javascript\n    define(function (require) {\n      // Require react-reorder here\n    });\n    ```\n\n3. Configuration\n\n    **Note: If your array is an array of primitives (e.g. strings) then `itemKey` is not required as the string itself will be used as the key, however item keys must be unique in any case**\n\n      1. Using JSX\n\n          ```javascript\n          \u003cReorder\n            // The key of each object in your list to use as the element key\n            itemKey='name'\n            // Lock horizontal to have a vertical list\n            lock='horizontal'\n            // The milliseconds to hold an item for before dragging begins\n            holdTime='500'\n            // The list to display\n            list={[\n              {name: 'Item 1'},\n              {name: 'Item 2'},\n              {name: 'Item 3'}\n            ]}\n            // A template to display for each list item\n            template={ListItem}\n            // Function that is called once a reorder has been performed\n            callback={this.callback}\n            // Class to be applied to the outer list element\n            listClass='my-list'\n            // Class to be applied to each list item's wrapper element\n            itemClass='list-item'\n            // A function to be called if a list item is clicked (before hold time is up)\n            itemClicked={this.itemClicked}\n            // The item to be selected (adds 'selected' class)\n            selected={this.state.selected}\n            // The key to compare from the selected item object with each item object\n            selectedKey='uuid'\n            // Allows reordering to be disabled\n            disableReorder={false}\n          /\u003e\n          ```\n\n      2. Using standard Javascript\n\n          ```javascript\n          React.createElement(Reorder, {\n            // The key of each object in your list to use as the element key\n            itemKey: 'name',\n            // Lock horizontal to have a vertical list\n            lock: 'horizontal',\n            // The milliseconds to hold an item for before dragging begins\n            holdTime: '500',\n            // The list to display\n            list: [\n              {name: 'Item 1'},\n              {name: 'Item 2'},\n              {name: 'Item 3'}\n            ],\n            // A template to display for each list item\n            template: ListItem,\n            // Function that is called once a reorder has been performed\n            callback: this.callback,\n            // Class to be applied to the outer list element\n            listClass: 'my-list',\n            // Class to be applied to each list item's wrapper element\n            itemClass: 'list-item',\n            // A function to be called if a list item is clicked (before hold time is up)\n            itemClicked: this.itemClicked,\n            // The item to be selected (adds 'selected' class)\n            selected: this.state.selected,\n            // The key to compare from the selected item object with each item object\n            selectedKey: 'uuid',\n            // Allows reordering to be disabled\n            disableReorder: false\n          })\n          ```\n\n4. Callback functions\n\n      1. The `callback` function that is called once a reorder has been performed\n\n          ```javascript\n          function callback(event, itemThatHasBeenMoved, itemsPreviousIndex, itemsNewIndex, reorderedArray) {\n            // ...\n          }\n          ```\n\n      2. The `itemClicked` function that is called when an item is clicked before any dragging begins\n\n          ```javascript\n          function itemClicked(event, itemThatHasBeenClicked, itemsIndex) {\n            // ...\n          }\n          ```\n\n          **Note: `event` will be the synthetic React event for either `mouseup` or `touchend`, and both contain `clientX` \u0026 `clientY` values (for ease of use)**\n\n## Compatibility / Requirements\n\n* Version `2.x` tested and working with React `0.14`\n\n* Versions `1.x` tested and working with React `0.12` - `0.13`\n\n* requirejs / commonjs / browserify (__Optional, but recommended*__)\n\n\\* Has only been tested with requirejs \u0026 browserify\n\n## Supported Browsers\n\n### Desktop\n\n* Internet Explorer 9+ (may support IE8**)\n\n* Google Chrome (tested in version 39.0.2171.95(64-bit))\n\n* Mozilla Firefox (tested in version 33.0)\n\n* Opera (tested in version 26.0.1656.60)\n\n* Safari (tested in version 7.1.2 (9537.85.11.5))\n\n\\** Have not had a chance to test in IE8, but IE8 is supported by React\n\n\n### Mobile\n\n* Chrome (tested in version 40.0.2214.89)\n\n* Safari (tested on iOS 8)\n\n## Untested Browsers\n\n* Internet Explorer 8*** (the lowest version that React supports)\n\n\\*** If anyone could confirm that this works in IE8, that'd be awesome\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjakesidsmith%2Freact-reorder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjakesidsmith%2Freact-reorder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjakesidsmith%2Freact-reorder/lists"}