vin-it / react-sort-list

React Drag and Drop sortable list.

react-sort-list

React Drag and Drop sortable list for array of objects.

How to Install

npm install react-sort-list

Example & How to use

import { SortableItem, swapArrayPositions } from 'react-sort-list';
import { useState } from 'react';

let todos = [
  {id: 1, title: "Task 1"},
  {id: 2, title: "Task 2"},
  {id: 3, title: "Task 3"}
]



function App() {
  const [todoState, setTodoState] = useState(todos);

  function swap(dragIndex, dropIndex) {
    let swappedTodos = swapArrayPositions(todoState, dragIndex, dropIndex);

    setTodoState([...swappedTodos]);
  }

  return (
  <ul>
      {todoState.map(function (todo, index) {
          return (
            <SortableItem items={todoState} id={todo.id} key={todo.id} swap={swap} >
              <li> {todo.title} </li>
            </SortableItem>
          )
      })}
    </ul>
  );
}

export default App;

There are few things to keep in mind as you use this module, and they are demonstrated in the above example:

• This component will only work if you have an array of objects with an id for the object.
• The items that you want to be draggable should be wrapped in <SortableItem></SortableItem>. (Remember, don't wrap the entire list, but each individual element in the list)
• The <SortableItem> element needs the array list in the "items" prop, and id of the each individual item in the "id" prop, and a method (can be named anything, see the example above) as the "swap" prop. This prop will return two indexes that will swap that array items. In the above example we have used`

<SortableItem items={todos} id={todo.id} key={todo.id} swap={this.swap}>
    <li> {todo.title} </li>
</SortableItem>

but you can use a React component with it's own functionality. For example,

<SortableItem items={todos} id={todo.id} key={todo.id} swap={this.swap}>
    <TodoItem
    createTodo={this.props.createTodo}
    deleteTodo={this.props.deleteTodo} />
</SortableItem>

react-sort-list's Issues

Width set to 50%

Hello, thank you very much for the simple and great component,
I wonder why you set the width of "dropBox" class to 50%,
i was trying to changed it, but it seems you defined it as line style

Please make lib.index.js human readable

Is there a reason why lib/index.js is minified?

Is this file open source? What is the license? The first line reads For license information please see index.js.LICENSE.txt. But I cannot find a index.js.LICENSE.txt file

Please make this file human readable