Install
yarn add me-sortable
Use
Import List
from me-sortable
, instead of List
from @material-ui/core
.
// import List from "@material-ui/core";;
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
;; { const list setter = ; return <List update=setter>list</List>;} { /* ... */}
Groups
To sort between different groups add a groupName
and getChildPayload
to ContainerProps:
<List ContainerProps= groupsName: "same-name-for-each-group" listindex ></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.