{"id":17205430,"url":"https://github.com/valentinh/react-easy-sort","last_synced_at":"2025-04-12T19:50:29.757Z","repository":{"id":39974442,"uuid":"336207761","full_name":"ValentinH/react-easy-sort","owner":"ValentinH","description":"A React component to sort items in lists or grids","archived":false,"fork":false,"pushed_at":"2024-08-01T12:04:42.000Z","size":6445,"stargazers_count":190,"open_issues_count":12,"forks_count":27,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-12T19:50:04.332Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ValentinH.github.io/react-easy-sort","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/ValentinH.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2021-02-05T08:19:16.000Z","updated_at":"2025-04-10T16:38:25.000Z","dependencies_parsed_at":"2022-08-09T15:36:58.460Z","dependency_job_id":"612fe74c-a999-4ef7-a377-04cfb5390be3","html_url":"https://github.com/ValentinH/react-easy-sort","commit_stats":{"total_commits":54,"total_committers":12,"mean_commits":4.5,"dds":0.537037037037037,"last_synced_commit":"ff545d7468423c1cc5769018455d5241e36f68c1"},"previous_names":["ricardo-ch/react-easy-sort"],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ValentinH%2Freact-easy-sort","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ValentinH%2Freact-easy-sort/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ValentinH%2Freact-easy-sort/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ValentinH%2Freact-easy-sort/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ValentinH","download_url":"https://codeload.github.com/ValentinH/react-easy-sort/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248625501,"owners_count":21135513,"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":[],"created_at":"2024-10-15T02:25:18.877Z","updated_at":"2025-04-12T19:50:29.728Z","avatar_url":"https://github.com/ValentinH.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-easy-sort\n\nA React component to sort items in lists or grids\n\n[![version][version-badge]][package] [![Monthly downloads][npmstats-badge]][npmstats] ![gzip size][brotli-badge] [![MIT License][license-badge]][license] [![PRs Welcome][prs-badge]][prs]\n\n![react-easy-sort-demo](https://user-images.githubusercontent.com/2678610/107036435-f27fbb00-67b9-11eb-8e3f-72a000586d35.gif)\n\nThe goal of this component is to allow sorting elements with drag and drop.\n\nIt is mobile friendly by default. It doesn't block scrolling the page when swiping inside it:\nthe user needs to press an item during at least 200ms to start the drag gesture.\n\nOn non-touch devices, the drag gesture only starts after moving an element by at least one pixel.\nThis is done to avoid blocking clicks on clickable elements inside an item.\n\n## Features\n\n- Supports horizontal and vertical lists\n- Supports grid layouts\n- Mobile-friendly\n- IE11 support 🙈\n\n## Demo\n\nCheck out the examples:\n\n- [Example with grid layout](https://codesandbox.io/s/react-easy-sort-grid-demo-87ev9)\n- [Example with vertical list layout](https://codesandbox.io/s/react-easy-sort-vertical-list-demo-njg4i)\n- [Example with horizontal list layout](https://codesandbox.io/s/react-easy-sort-horizontal-list-demo-69b3k)\n- [Interactive avatars demo](https://codesandbox.io/s/react-easy-sort-images-demo-486qk)\n- [Example with custom knobs](https://codesandbox.io/s/react-easy-sort-custom-knob-demo-ij37h)\n\n## Installation\n\n```shell\nyarn add react-easy-sort\n```\n\nor\n\n```shell\nnpm install react-easy-sort --save\n```\n\n## Basic usage\n\n```js\nimport SortableList, { SortableItem } from 'react-easy-sort'\nimport { arrayMoveImmutable } from 'array-move'\n\nconst App = () =\u003e {\n  const [items, setItems] = React.useState(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'])\n\n  const onSortEnd = (oldIndex: number, newIndex: number) =\u003e {\n    setItems((array) =\u003e arrayMoveImmutable(array, oldIndex, newIndex))\n  }\n\n  return (\n    \u003cSortableList onSortEnd={onSortEnd} className=\"list\" draggedItemClassName=\"dragged\"\u003e\n      {items.map((item) =\u003e (\n        \u003cSortableItem key={item}\u003e\n          \u003cdiv className=\"item\"\u003e{item}\u003c/div\u003e\n        \u003c/SortableItem\u003e\n      ))}\n    \u003c/SortableList\u003e\n  )\n}\n```\n\n## Props\n\n### SortableList\n\n| Name                     |                         Description                          |                      Type                      |         Default |\n| ------------------------ | :----------------------------------------------------------: | :--------------------------------------------: | --------------: |\n| **as**                   |        Determines html tag for the container element         |         `keyof JSX.IntrinsicElements`          |           `div` |\n| **onSortEnd\\***          |       Called when the user finishes a sorting gesture.       | `(oldIndex: number, newIndex: number) =\u003e void` |               - |\n| **draggedItemClassName** |           Class applied to the item being dragged            |                    `string`                    |               - |\n| **lockAxis**             |            Determines if an axis should be locked            |                 `'x'` or `'y'`                 |                 |\n| **allowDrag**            |           Determines whether items can be dragged            |                   `boolean`                    |          `true` |\n| **customHolderRef**      | Ref of an element to use as a container for the dragged item |     `React.RefObject\u003cHTMLElement \\| null\u003e`     | `document.body` |\n| **dropTarget**           |             React element to use as a dropTarget             |                  `ReactNode`                   |                 |\n\n### SortableItem\n\nThis component doesn't take any other props than its child. This child should be a single React element that can receives a ref. If you pass a component as a child, it needs to be wrapped with `React.forwardRef()`.\n\n### SortableKnob\n\nYou can use this component if you don't want the whole item to be draggable but only a specific area of it.\n\n```js\nimport SortableList, { SortableItem, SortableKnob } from 'react-easy-sort'\nimport arrayMove from 'array-move'\n\nconst App = () =\u003e {\n  const [items, setItems] = React.useState(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'])\n\n  const onSortEnd = (oldIndex: number, newIndex: number) =\u003e {\n    setItems((array) =\u003e arrayMove(array, oldIndex, newIndex))\n  }\n\n  return (\n    \u003cSortableList onSortEnd={onSortEnd} className=\"list\" draggedItemClassName=\"dragged\"\u003e\n      {items.map((item) =\u003e (\n        \u003cSortableItem key={item}\u003e\n          \u003cdiv className=\"item\"\u003e\n            \u003cSortableKnob\u003e\n              \u003cdiv\u003eDrag me\u003c/div\u003e\n            \u003c/SortableKnob\u003e\n            {item}\n          \u003c/div\u003e\n        \u003c/SortableItem\u003e\n      ))}\n    \u003c/SortableList\u003e\n  )\n}\n```\n\nThis component doesn't take any other props than its child. This child should be a single React element that can receive a ref. If you pass a component as a child, it needs to be wrapped with `React.forwardRef()`.\n\n## Recommended CSS rules\n\nTo disable browser default behaviors that can interfer with the dragging experience, we recommend adding the following declarations on the \"items\":\n\n- `user-select: none;`: disable the selection of content inside the item (the blue box)\n- `pointer-events: none;`: required for some browsers if your items contain images (see the [Interactive avatars demo](https://codesandbox.io/s/react-easy-sort-images-demo-486qk))\n\n## Development\n\n```shell\nyarn\nyarn start\n```\n\nNow, open `http://localhost:3001/index.html` and start hacking!\n\n## License\n\n[MIT](https://github.com/ValentinH/react-easy-sort/blob/master/LICENSE)\n\n## Maintainers\n\nThis project is maintained by Valentin Hervieu.\n\nThis project was originally part of [@ricardo-ch](https://github.com/ricardo-ch/) organisation because I (Valentin) was working at Ricardo.\nAfter leaving this company, they gracefully accepted to transfer the project to me. ❤️\n\n## Alternatives\n\n- https://github.com/clauderic/react-sortable-hoc : before creating this library, I was using it and it was also supporting grid layouts. However, we had a lot of errors reported to our Sentry and this project was not maintained anymore.\n- https://github.com/atlassian/react-beautiful-dnd: another great library for sorting items. However, it doesn't support grid layouts (as of 2021-02-05).\n\n[npm]: https://www.npmjs.com/\n[node]: https://nodejs.org\n[version-badge]: https://img.shields.io/npm/v/react-easy-sort.svg?style=flat-square\n[package]: https://www.npmjs.com/package/react-easy-sort\n[downloads-badge]: https://img.shields.io/npm/dm/react-easy-sort.svg?style=flat-square\n[npmstats]: https://npm-stat.com/charts.html?package=react-easy-sort\u0026from=2021-02-01\n[npmstats-badge]: https://img.shields.io/npm/dm/react-easy-sort.svg?style=flat-square\n[brotli-badge]: http://img.badgesize.io/https://unpkg.com/react-easy-sort/umd/react-easy-sort.min.js?compression=brotli\u0026style=flat-square\u00261\n[license-badge]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square\n[license]: https://github.com/ValentinH/react-easy-sort/blob/main/LICENSE\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs]: http://makeapullrequest.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalentinh%2Freact-easy-sort","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvalentinh%2Freact-easy-sort","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalentinh%2Freact-easy-sort/lists"}