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 (


{todoState.map(function (todo, index) {
return (


• {todo.title}


)
})}

);
}

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 . (Remember, don't wrap the entire list, but each individual element in the list)
- The 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

``



{todo.title}



`

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

`

createTodo={this.props.createTodo}
deleteTodo={this.props.deleteTodo} />

``