https://github.com/mastro-elfo/me-sortable
Extend @material-ui List to be sortable
https://github.com/mastro-elfo/me-sortable
Last synced: 4 months ago
JSON representation
Extend @material-ui List to be sortable
- Host: GitHub
- URL: https://github.com/mastro-elfo/me-sortable
- Owner: mastro-elfo
- License: mit
- Created: 2020-11-15T10:31:04.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-11-24T09:36:01.000Z (over 4 years ago)
- Last Synced: 2025-02-07T15:38:00.298Z (4 months ago)
- Language: JavaScript
- Size: 47.9 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
This component uses [`react-smooth-dnd`](https://github.com/kutlugsahin/react-smooth-dnd#readme) to ad _Drag and Drop_ functionality to a `List` component from [`@material-ui`](material-ui.com/).
# Install
```sh
yarn add me-sortable
```
or
```sh
npm i -s me-sortable
```
# Use
Import `List` from `me-sortable`, instead of `List` from `@material-ui/core`.
```js
// 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
```js
import React, { useState } from "react";
import List from "me-sortable";
function Component() {
const [list, setList] = useState([
/* ... */
]);
return {list.map(mapper)};
}
function mapper(item) {
/* ... */
}
```
# Groups
To sort between different groups add a `groupName` and `getChildPayload` to ContainerProps:
```js
list[index],
}}
>
```
See also [`Container` properties](https://github.com/kutlugsahin/react-smooth-dnd#container) of `react-smooth-dnd`.
# 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:
```js
ContainerProps={{
lockAxis: "y"
}}
```
## `...rest`
The rest of properties is pased to a `@material-ui` `List` component.