react-sortablejs

react-sortablejs is a lightweight React component that acts as a wrapper around the popular Sortable.js library. Sortable.js is a minimalist JavaScript library for reorderable drag-and-drop lists, allowing users to rearrange elements within a list or move them between multiple lists, all without jQuery.

The primary purpose of react-sortablejs is to bring the powerful and intuitive drag-and-drop sorting capabilities of Sortable.js into React applications seamlessly. It abstracts away the direct DOM manipulation that Sortable.js might require, allowing developers to manage sortable lists declaratively using React's component model and state management.

Key features and benefits of using react-sortablejs:
* Declarative Usage: Integrate drag-and-drop functionality by simply providing your list data and a setter function (e.g., from `useState`) to update the list's order.
* No jQuery: Sortable.js itself is a pure JavaScript library, and its React wrapper maintains this independence.
* Flexibility: Supports various list types including vertical, horizontal, and grid layouts.
* Customization: Offers extensive options to customize behavior, such as specifying drag handles, disabling sorting for certain items, setting animation durations, defining groups for cross-list dragging, and more.
* Event Handling: Provides callbacks for various stages of the drag-and-drop process, such as `onEnd` (when sorting stops and the new order is established), `onStart`, `onUpdate`, `onAdd`, `onRemove`, etc., allowing for precise control and state updates.
* Simple State Management: The component typically takes a `list` prop (your array of items) and an `setList` prop (a function to update your state with the new list order), making it straightforward to integrate with React's state hooks.

To use react-sortablejs, you generally need to install both react-sortablejs and its peer dependency sortablejs:
`npm install react-sortablejs sortablejs`

It's an excellent choice for applications requiring interactive lists, task boards (like Trello), drag-and-drop configuration panels, or any scenario where users need to reorder items visually.

Example Code

import React, { useState } from 'react';
import { ReactSortable } from 'react-sortablejs';
import './App.css'; // Assume some basic styling for .list and .list-item

function SortableListExample() {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
    { id: 4, name: 'Item 4' },
  ]);

  return (
    <div className="sortable-container">
      <h2>Drag and Drop Sortable List</h2>
      <ReactSortable
        list={items}
        setList={setItems}
        animation={200} // Milliseconds for the animation when an item is dropped
        delay={0} // Delay in ms to initiate sorting (helps with click vs. drag)
        group="shared-group" // Allows items to be dragged between lists if multiple ReactSortable components share the same group name
        handle=".handle" // CSS selector for the drag handle within each item
        className="list" // CSS class for the sortable container
        style={{ border: '1px solid #ccc', padding: '10px', minHeight: '100px', backgroundColor: '#f9f9f9' }}
      >
        {items.map((item) => (
          <div key={item.id} className="list-item" style={{
            border: '1px solid #eee',
            padding: '10px',
            margin: '5px 0',
            backgroundColor: '#fff',
            display: 'flex',
            alignItems: 'center',
            cursor: 'grab' // Indicate sortable
          }}>
            <span className="handle" style={{ cursor: 'grab', marginRight: '10px', fontSize: '1.2em' }}>
              ⋮ {/* Unicode for three vertical dots (handle icon) */}
            </span>
            {item.name} (ID: {item.id})
          </div>
        ))}
      </ReactSortable>

      <h3>Current Item Order:</h3>
      <pre>{JSON.stringify(items, null, 2)}</pre>
    </div>
  );
}

export default SortableListExample;

/*
// Example App.css for basic styling
.sortable-container {
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  background-color: #fff;
}

h2, h3 {
  text-align: center;
  color: #333;
}

.list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.list-item {
  background-color: #f0f0f0;
  border: 1px solid #e0e0e0;
  padding: 10px 15px;
  margin-bottom: 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.list-item:last-child {
  margin-bottom: 0;
}

.handle {
  cursor: grab;
  margin-right: 10px;
  font-weight: bold;
  color: #666;
}

pre {
  background-color: #eee;
  padding: 15px;
  border-radius: 5px;
  font-family: 'Courier New', monospace;
  white-space: pre-wrap;
  word-wrap: break-word;
}
*/

Example Code

Related Topics