@mish-tv/sortable-list
`@mish-tv/sortable-list` is a React component for creating a vertical list UI that can be sorted by drag and drop.
Usage
import React from "react";
import { RowCreator, SortableList } from "@mish-tv/sortable-list";
type Item = { id: number; body: string; height: number; marginTop: number };
export const Component = (props: { initialIds: number[]; items: Record<number, Item> }) => {
const [ids, setIds] = React.useState(props.initialIds);
const row: RowCreator<HTMLLIElement, number> = React.useCallback(
(id, rowAttributes, handleAttributes, options) => {
const item = props.items[id];
let className = "row";
if (options.isDragging) className += " dragging";
return (
<li className={className} {...rowAttributes}>
<button type="button" {...handleAttributes}>
⣿
</button>
<span>{item.body}</span>
</li>
);
},
[props.items],
);
return (
<ul className="list">
<SortableList ids={ids} setIds={setIds} row={row} scrollBoundaryTop={50} scrollBoundaryBottom={100} />
</ul>
);
};
Installation
npm install --save @mish-tv/sortable-list