React SortableJS Bindings

Common errors

• SortableJS: MultiDrag and Swap are not available in this version. You must mount the plugin with sortable ONCE ONLY.

  cause Attempting to use a SortableJS plugin (e.g., via `multiDrag` or `swap` props on `<ReactSortable>`) without globally mounting its constructor via `Sortable.mount()`.
  fix Call `Sortable.mount(new MultiDrag(), new Swap());` (or the relevant plugin constructors) once in your application's entry point before `<ReactSortable />` is rendered.

• TypeError: (0 , react_sortablejs__WEBPACK_IMPORTED_MODULE_2__.Sortable) is not a constructor

  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.
  fix Use `Sortable.mount(new PluginConstructor())` for plugins. The core `SortableJS` instance is managed internally by `ReactSortable`.

Warnings

• gotcha The library is explicitly stated as 'not considered ready for production' in its README. While actively maintained, users should exercise caution.
  Fix: Thoroughly test its stability and behavior in your specific production environment. Monitor the GitHub issues for known bugs or breaking changes.
• gotcha SortableJS plugins (e.g., MultiDrag, Swap) must be explicitly mounted globally via `Sortable.mount(new PluginConstructor())` before being enabled as props on `<ReactSortable />`.
  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 `<ReactSortable />`.
• gotcha 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.
  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})))`.
• breaking Older versions might have compatibility issues with React 18, particularly regarding missing `children` prop types.
  Fix: Update to `react-sortablejs@6.1.3` or newer to ensure full compatibility with React 18.

Install

• npm install react-sortablejs npm
• yarn add react-sortablejs yarn
• pnpm add react-sortablejs pnpm

Imports

• ReactSortable
  wrong:

  import ReactSortable from 'react-sortablejs'; // No default export
  const ReactSortable = require('react-sortablejs').ReactSortable; // CommonJS (library is ESM-first)

  correct:

  import { ReactSortable } from 'react-sortablejs';

  This is the primary component for creating sortable lists. It's a named export.
• Sortable
  wrong:

  import * as Sortable from 'react-sortablejs'; // Sortable is not the default export
  const { Sortable } = require('react-sortablejs'); // CommonJS

  correct:

  import { Sortable } from 'react-sortablejs';

  This named export is primarily used for mounting SortableJS plugins (e.g., `Sortable.mount(new MultiDrag())`). Do not attempt to instantiate it directly.
• MultiDrag
  wrong:

  const MultiDrag = require('react-sortablejs').MultiDrag; // CommonJS

  correct:

  import { MultiDrag } from 'react-sortablejs';

  Used as a constructor for the MultiDrag plugin when mounting with `Sortable.mount()`.

Quickstart

Demonstrates a basic sortable list using a React functional component with local state management for drag-and-drop reordering.

import React, { FC, useState } from "react";
import { ReactSortable } from "react-sortablejs";

interface ItemType {
  id: number;
  name: string;
}

export const BasicFunction: FC = () => {
  const [state, setState] = useState<ItemType[]>([
    { id: 1, name: "shrek" },
    { id: 2, name: "fiona" },
    { id: 3, name: "donkey" },
  ]);

  return (
    <div style={{ maxWidth: '300px', margin: '20px auto', border: '1px solid #eee', padding: '10px' }}>
      <h3>Drag and Drop List</h3>
      <ReactSortable list={state} setList={setState} animation={150} group="shared-group">
        {state.map((item) => (
          <div 
            key={item.id}
            style={{
              padding: '10px',
              margin: '5px 0',
              border: '1px solid #ccc',
              backgroundColor: '#f9f9f9',
              cursor: 'grab'
            }}
          >
            {item.name}
          </div>
        ))}
      </ReactSortable>
    </div>
  );
};