{"id":13422138,"url":"https://github.com/jasonslyvia/react-anything-sortable","last_synced_at":"2025-05-15T16:05:24.167Z","repository":{"id":20748276,"uuid":"24032732","full_name":"jasonslyvia/react-anything-sortable","owner":"jasonslyvia","description":"A ReactJS component that can sort any children with touch support and IE8 compatibility","archived":false,"fork":false,"pushed_at":"2018-03-16T01:38:14.000Z","size":7331,"stargazers_count":459,"open_issues_count":14,"forks_count":84,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-10-14T08:07:55.338Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://jasonslyvia.github.io/react-anything-sortable/demo/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"llvm-mirror/clang","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jasonslyvia.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}},"created_at":"2014-09-14T20:34:12.000Z","updated_at":"2024-04-08T08:37:57.000Z","dependencies_parsed_at":"2022-07-07T15:58:33.549Z","dependency_job_id":null,"html_url":"https://github.com/jasonslyvia/react-anything-sortable","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasonslyvia%2Freact-anything-sortable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasonslyvia%2Freact-anything-sortable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasonslyvia%2Freact-anything-sortable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasonslyvia%2Freact-anything-sortable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jasonslyvia","download_url":"https://codeload.github.com/jasonslyvia/react-anything-sortable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247730069,"owners_count":20986404,"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-07-30T23:00:37.849Z","updated_at":"2025-04-07T21:13:45.398Z","avatar_url":"https://github.com/jasonslyvia.png","language":"JavaScript","funding_links":[],"categories":["UI Components","Uncategorized","Awesome React","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e","JavaScript","React"],"sub_categories":["Form Components","Uncategorized","Tools","React Components"],"readme":"This project is in INACTIVE status, bugfix will be maintained, but no new feature will be added. Feel free to use it if it suits your need, for complicated sorting features I'd recommend [react-dnd](https://github.com/react-dnd/react-dnd) by dan.\n\n-----\n\n# react-anything-sortable [![Build Status](https://travis-ci.org/jasonslyvia/react-anything-sortable.svg)](https://travis-ci.org/jasonslyvia/react-anything-sortable) [![npm version](https://badge.fury.io/js/react-anything-sortable.svg)](http://badge.fury.io/js/react-anything-sortable) [![Coverage Status](https://coveralls.io/repos/github/jasonslyvia/react-anything-sortable/badge.svg?branch=master)](https://coveralls.io/github/jasonslyvia/react-anything-sortable?branch=master)\n\n## Features\n\n - Sort any React element you like, images, composite components, etc.\n - No external dependencies but `React` itself\n - Touch event support\n - Thoroughly tested\n\n## Quick Demo\n\n[Live Demo](http://jasonslyvia.github.io/react-anything-sortable/demo/)\n\n**Sort custom style children**\n\n![react-anything-sortable](http://ww4.sinaimg.cn/large/831e9385gw1equswkpcfag209p02sgn5.gif)\n\n**Sort images**\n\n![react-anything-sortable](http://ww3.sinaimg.cn/mw690/831e9385gw1equstgvfmzg20a50360va.gif)\n\n**Children with custom event handler**\n\n![react-anything-sortable](http://ww4.sinaimg.cn/large/831e9385gw1eqy459cieqg20au02s0t4.gif)\n\n## Installation\n\n```\n$ npm install --save react-anything-sortable\n\n// UMD build is provided as well, but please do consider use modern module bundlers like webpack or browserify.\n```\n\nYou have to add necessary styles for sortable to work properly, if you're using bundle tools like webpack, just \n\n```javascript\nimport 'react-anything-sortable/sortable.css';\n```\n\nOr copy this css to your own style base.\n\n## How to use\n\nYou can check the straight-forward demo by examining `demo` folder, or here's a brief example.\n\nIn `app.js`\n\n````javascript\nvar ReactDOM = require('react-dom');\nvar Sortable = require('react-anything-sortable');\nvar SortableItem = require('./SortableItem');\n\nReactDOM.render(\n\u003cSortable onSort={handleSort}\u003e\n  \u003cSortableItem sortData=\"1\" /\u003e\n  \u003cSortableItem sortData=\"2\" /\u003e\n\u003c/Sortable\u003e\n, document.body);\n````\n\nand in `SortableItem.js`\n\nA modern usage would be\n\n```javascript\nimport React from 'react';\nimport { SortableContainer } from 'react-anything-sortable';\n\n@sortable\nclass SortableItem extends React.Component {\n  render() {\n    return (\n      \u003cSortableContainer\u003e\n        \u003cdiv\u003e\n          your item\n        \u003c/div\u003e\n      \u003c/SortableContainer\u003e\n    );\n  }\n};\n```\n\nOr you want to construct it manually\n\n```javascript\nimport React from 'react';\nimport { sortable } from 'react-anything-sortable';\n\n@sortable\nclass SortableItem extends React.Component {\n  render() {\n    return (\n      \u003cdiv                       // \u003c-- make sure pass props to your own item,\n        className={this.props.className}\n        style={this.props.style}\n        onMouseDown={this.props.onMouseDown}\n        onTouchStart={this.props.onTouchStart}\n      \u003e\n        your item                //     it contains required `className`s and\n      \u003c/div\u003e                     //     event handlers\n    );\n  }\n};\n```\n\nOr if you favor the old fashion way\n\n````javascript\nvar React = require('react');\nvar createReactClass = require('create-react-class');\nvar SortableItemMixin = require('react-anything-sortable').SortableItemMixin;\n\nvar SortableItem = createReactClass({\n  mixins: [SortableItemMixin],\n\n  render: function(){\n    return this.renderWithSortable(  // \u003c-- this.renderWithSortable call is essential\n      \u003cdiv\u003eyour item\u003c/div\u003e\n    );\n  }\n});\n````\n\nYou can even pass un-sortable children to `\u003cSortable /\u003e` and it just works, checkout this [demo](http://jasonslyvia.github.io/react-anything-sortable/demo/#/fixed) to find out more. If you do so, remember to add according style to your un-sortable items.\n\n## Props\n\n### onSort\n\nType: Function Default: () =\u003e {}\n\nBeing called with sorted data when a sort operation is finished.\n\n**Arguments**\n\n 1. sortedArray (*Array*) Sorted array consists of `sortData` plucked from each sortable item\n 2. currentDraggingSortData (*Any*) The sortData of dragging element\n 3. currentDraggingIndex (*Number*) The index of dragging element\n\n### containment\n\nType: Bool Default: false\n\nConstrain dragging area within sortable container.\n\n[demo](http://jasonslyvia.github.io/react-anything-sortable/demo/index.html#/containment)\n\n### dynamic\n\nType: Bool Default: false\n\nDynamically update the sortable when its children change. If using this option, make sure to use the onSort callback to update the order of the children passed to the Sortable component when the user sorts!\n\n[demo](http://jasonslyvia.github.io/react-anything-sortable/demo/index.html#/dynamic)\n\n### sortHandle\n\nType: String Default: undefined\n\nA className to allow only matching element of sortable item to trigger sort operation. \n\n[demo](http://jasonslyvia.github.io/react-anything-sortable/demo/index.html#/handle)\n\n### sortData\n\n**Add this props to `SortableItem` rather than `Sortable` !**\n\nType: Any Default: undefined\n\nWill be returned by `onSort` callback in the form of array.\n\n### direction\n\nType: String Default: false \nOptions: vertical, horizontal\n\nWill force dragging direction to vertical or horizontal mode.\n\n## Notice\n\n1. Specify your style for `Sortable` and `Sortable Items`, check `sortable.css`, **it is NOT optional!**\n2. Don't forget the `this.renderWithSortable` call in `SortableItem`, or spread props to your component if using decorators.\n3. In order to dynamically add or remove `SortableItem`s or change their order from outside the `Sortable`, you must use the `dynamic` option. This also requires using the `onSort` callback to update the order of the children when sorting happens.\n4. Make sure to add `draggable={false}` to images within sortable components to prevent glitching. See [here](https://github.com/jasonslyvia/react-anything-sortable/blob/master/demo/components/ImageItem.js) for an example.\n\n\n## Scripts\n\n```\n$ npm run test\n$ npm run watch\n$ npm run build\n$ npm run demo\n$ npm run demo:watch\n```\n\n\n## Contributors\n\n1. [stayradiated](https://github.com/stayradiated)\n2. [vizath](https://github.com/vizath)\n3. [zthomas](https://github.com/zthomas)\n4. [jakubruffer](https://github.com/jakubruffer)\n5. [Fabeline](https://github.com/Fabeline)\n6. [antialiasis](https://github.com/antialiasis)\n7. [JasonKleban](https://github.com/JasonKleban)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjasonslyvia%2Freact-anything-sortable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjasonslyvia%2Freact-anything-sortable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjasonslyvia%2Freact-anything-sortable/lists"}