Registry / web-framework / react-sortablejs

react-sortablejs

library6.1.4jsnpmunverified

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.

web-framework

npm install react-sortablejs

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-SORTABLEJS

react-sortablejs

web-frameworkjavascriptv6.1.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ReactSortable

✓ import { ReactSortable } from 'react-sortablejs';

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

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

Sortable

✓ import { Sortable } from 'react-sortablejs';

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

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

MultiDrag

✓ import { MultiDrag } from 'react-sortablejs';

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

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

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> ); };

Debug

Known issues

gotchaThe 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.

affects: >=6.0.0

gotchaSortableJS 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 />`.

affects: >=6.0.0

gotchaWhen 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})))`.

affects: <6.1.5

breakingOlder 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.

affects: <6.1.3

Errors

Common errors & fixes

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

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

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`.

Upgrade

Version history

6.1.4latest on npm

Audit

Dependencies

sortablejsrequiredCore drag-and-drop functionality, required peer dependency.

@types/sortablejsoptionalTypeScript definitions for SortableJS, optional but recommended for TypeScript projects.

reactrequiredReact framework, required peer dependency.

react-domrequiredReact DOM bindings, required peer dependency for web applications.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/SortableJS/react-sortablejs ↗

packagehttps://www.npmjs.com/package/react-sortablejs ↗