{"id":11863,"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.","status":"active","version":"6.1.4","language":"javascript","source_language":"en","source_url":"https://github.com/SortableJS/react-sortablejs","tags":["javascript","typescript"],"install":[{"cmd":"npm install react-sortablejs","lang":"bash","label":"npm"},{"cmd":"yarn add react-sortablejs","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-sortablejs","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core drag-and-drop functionality, required peer dependency.","package":"sortablejs"},{"reason":"TypeScript definitions for SortableJS, optional but recommended for TypeScript projects.","package":"@types/sortablejs","optional":true},{"reason":"React framework, required peer dependency.","package":"react","optional":false},{"reason":"React DOM bindings, required peer dependency for web applications.","package":"react-dom","optional":false}],"imports":[{"note":"This is the primary component for creating sortable lists. It's a named export.","wrong":"import ReactSortable from 'react-sortablejs'; // No default export\nconst ReactSortable = require('react-sortablejs').ReactSortable; // CommonJS (library is ESM-first)","symbol":"ReactSortable","correct":"import { ReactSortable } from 'react-sortablejs';"},{"note":"This named export is primarily used for mounting SortableJS plugins (e.g., `Sortable.mount(new MultiDrag())`). Do not attempt to instantiate it directly.","wrong":"import * as Sortable from 'react-sortablejs'; // Sortable is not the default export\nconst { Sortable } = require('react-sortablejs'); // CommonJS","symbol":"Sortable","correct":"import { Sortable } from 'react-sortablejs';"},{"note":"Used as a constructor for the MultiDrag plugin when mounting with `Sortable.mount()`.","wrong":"const MultiDrag = require('react-sortablejs').MultiDrag; // CommonJS","symbol":"MultiDrag","correct":"import { MultiDrag } from 'react-sortablejs';"}],"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([\n { id: 1, name: \"shrek\" },\n { id: 2, name: \"fiona\" },\n { id: 3, name: \"donkey\" },\n ]);\n\n return (\n
\n

Drag and Drop List

\n \n {state.map((item) => (\n
\n {item.name}\n
\n ))}\n \n
\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."},"warnings":[{"fix":"Thoroughly test its stability and behavior in your specific production environment. Monitor the GitHub issues for known bugs or breaking changes.","message":"The library is explicitly stated as 'not considered ready for production' in its README. While actively maintained, users should exercise caution.","severity":"gotcha","affected_versions":">=6.0.0"},{"fix":"Call `Sortable.mount(new MultiDrag(), new Swap());` (or any other plugins) once in your application's bootstrap file (e.g., `index.tsx`) or at a top-level component, before rendering ``.","message":"SortableJS plugins (e.g., MultiDrag, Swap) must be explicitly mounted globally via `Sortable.mount(new PluginConstructor())` before being enabled as props on ``.","severity":"gotcha","affected_versions":">=6.0.0"},{"fix":"Always create a new array instance for `setList`. For example, use `setList(prevList => [...prevList])` or deep clone items if they are objects: `setList(newList.map(item => ({...item})))`.","message":"When updating the `list` prop using the `setList` callback, ensure you provide a new array reference for React to detect changes and trigger a re-render. Direct mutation of the array will not work.","severity":"gotcha","affected_versions":"<6.1.5"},{"fix":"Update to `react-sortablejs@6.1.3` or newer to ensure full compatibility with React 18.","message":"Older versions might have compatibility issues with React 18, particularly regarding missing `children` prop types.","severity":"breaking","affected_versions":"<6.1.3"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Call `Sortable.mount(new MultiDrag(), new Swap());` (or the relevant plugin constructors) once in your application's entry point before `` is rendered.","cause":"Attempting to use a SortableJS plugin (e.g., via `multiDrag` or `swap` props on ``) without globally mounting its constructor via `Sortable.mount()`.","error":"SortableJS: MultiDrag and Swap are not available in this version. You must mount the plugin with sortable ONCE ONLY."},{"fix":"Use `Sortable.mount(new PluginConstructor())` for plugins. The core `SortableJS` instance is managed internally by `ReactSortable`.","cause":"Incorrectly trying to instantiate `Sortable` directly (e.g., `new Sortable()`). The `Sortable` export from `react-sortablejs` is a static class for mounting plugins, not for direct instantiation.","error":"TypeError: (0 , react_sortablejs__WEBPACK_IMPORTED_MODULE_2__.Sortable) is not a constructor"}],"ecosystem":"npm"}