{"library":"react-sortablejs","title":"React SortableJS Bindings","description":"react-sortablejs provides idiomatic React bindings for the powerful SortableJS drag-and-drop library, enabling developers to create interactive, sortable lists with declarative React components. It abstracts away direct DOM manipulation, integrating smoothly with React's state management. The package is currently at version 6.1.4 and receives maintenance updates focusing on bug fixes and dependency updates, though the README indicates it's \"not considered ready for production\". It differentiates itself by offering a ReactSortable component that directly accepts SortableJS options as props, along with supporting both functional and class-based React components and providing clear mechanisms for integrating SortableJS plugins like MultiDrag and Swap.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-sortablejs"],"cli":null},"imports":["import { ReactSortable } from 'react-sortablejs';","import { Sortable } from 'react-sortablejs';","import { MultiDrag } from 'react-sortablejs';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { FC, useState } from \"react\";\nimport { ReactSortable } from \"react-sortablejs\";\n\ninterface ItemType {\n  id: number;\n  name: string;\n}\n\nexport const BasicFunction: FC = () => {\n  const [state, setState] = useState<ItemType[]>([\n    { id: 1, name: \"shrek\" },\n    { id: 2, name: \"fiona\" },\n    { id: 3, name: \"donkey\" },\n  ]);\n\n  return (\n    <div style={{ maxWidth: '300px', margin: '20px auto', border: '1px solid #eee', padding: '10px' }}>\n      <h3>Drag and Drop List</h3>\n      <ReactSortable list={state} setList={setState} animation={150} group=\"shared-group\">\n        {state.map((item) => (\n          <div \n            key={item.id}\n            style={{\n              padding: '10px',\n              margin: '5px 0',\n              border: '1px solid #ccc',\n              backgroundColor: '#f9f9f9',\n              cursor: 'grab'\n            }}\n          >\n            {item.name}\n          </div>\n        ))}\n      </ReactSortable>\n    </div>\n  );\n};\n","lang":"typescript","description":"Demonstrates a basic sortable list using a React functional component with local state management for drag-and-drop reordering.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}