nested-react-sortablejs

Nested React Sortable

A customizable React component for creating nested sortable lists using SortableJS.

Features

• Create infinitely nested sortable lists
• Drag and drop between different lists
• Custom rendering of list items
• TypeScript support with comprehensive type definitions
• Simple and intuitive API

Installation

npm install nested-react-sortablejs
# or
yarn add nested-react-sortablejs

Basic Usage

import React, { useState } from 'react';
import { NestedSortable } from 'nested-react-sortablejs';
import 'nested-react-sortablejs/dist/style.css'; // Optional default styling

const App = () => {
  const [items, setItems] = useState([
    {
      id: '1',
      content: 'Item 1',
      children: [
        { id: '1-1', content: 'Item 1.1', children: [] },
        { id: '1-2', content: 'Item 1.2', children: [] }
      ]
    },
    {
      id: '2',
      content: 'Item 2',
      children: []
    }
  ]);

  const handleDrop = (newItems) => {
    setItems(newItems);
    console.log('Items updated:', newItems);
  };

  return (
    <NestedSortable
      items={items}
      onDrop={handleDrop}
    />
  );
};

export default App;

Custom Rendering

You can customize how items are rendered:

import React, { useState } from 'react';
import { NestedSortable } from 'nested-react-sortablejs';

const App = () => {
  const [items, setItems] = useState([/* your items */]);

  const renderItem = (item, index) => (
    <div className="custom-item">
      <span className="handle">⋮</span>
      <div className="content">{item.content}</div>
      {!item.children?.length && (
        <button onClick={() => console.log(`Clicked item ${item.id}`)}>
          Action
        </button>
      )}
    </div>
  );

  return (
    <NestedSortable
      items={items}
      onDrop={setItems}
      renderItem={renderItem}
    />
  );
};

API Reference

NestedSortable Props

Prop	Type	Default	Description
items	NestedItem[]	[]	Array of items to be sorted
group	string	'nested'	Group name for Sortable instance
className	string	''	Custom class name for the container
onDrop	(items: NestedItem[]) => void	undefined	Function called when an item is dropped
options	SortableOptions	{}	Additional Sortable.js options
renderItem	(item: NestedItem, index: number) => React.ReactNode	undefined	Custom renderer for list items

NestedItem Interface

interface NestedItem {
  id: string;
  content: string | React.ReactNode;
  children?: NestedItem[];
  data?: Record<string, any>;
}

Advanced Configuration

You can pass any Sortable.js options via the options prop:

<NestedSortable
  items={items}
  onDrop={handleDrop}
  options={{
    animation: 150,
    fallbackOnBody: true,
    swapThreshold: 0.65,
    ghostClass: 'ghost',
    chosenClass: 'chosen',
    dragClass: 'drag'
  }}
/>

Styling

The component comes with basic styling that you can import:

import 'nested-react-sortablejs/dist/style.css';

Or you can create your own styles by targeting these CSS classes:

• .nested-sortable - The main container
• .nested-item - Individual sortable items
• .nested-item-content - Content area of each item
• .nested-children - Container for nested children

License

MIT