me-sortable

Install

yarn add me-sortable

Use

Import List from me-sortable, instead of List from @material-ui/core.

// import List from "@material-ui/core";
import List from "me-sortable";

Add the update property to List. This is a function that updates the list when an item is dropped. For functional components this is the second value returned by useState.

Example with functional component

import React, { useState } from "react";
import List from "me-sortable";
 
function Component() {
  const [list, setter] = useState([
    /* ... */
  ]);
  return <List update={setter}>{list.map(mapper)}</List>;
}
 
function mapper(item) {
  /* ... */
}

Groups

To sort between different groups add a groupName and getChildPayload to ContainerProps:

<List
  ContainerProps={{
    groupsName: "same-name-for-each-group",
    getChildPayload: (index) => list[index],
  }}
></List>

Properties

children

Any number of ListItem(s). Each ListItem can have its own children as a regular List.

handler

A component to be used as handler. If undefined it uses a default one.

handlerClass

A string that is uses as className to find if an item is draggable. default is "handler".

right

If true the handler is put on the right side. Defaults to false.

update

A function that updates the state of the list. The same as setState from useState: https://it.reactjs.org/docs/hooks-reference.html#usestate

ContainerProps

An object of properties passed to the Container components: https://github.com/kutlugsahin/react-smooth-dnd#props

To drag vertically:

ContainerProps={{
  lockAxis: "y"
}}

...rest

The rest of properties is pased to a @material-ui List component.