@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 };

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.isDraggingThis) className += " draggingThis";
      if (options.isDraggingOthers) className += " draggingOthers";

      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} />
    </ul>
  );
};

Installation

npm install --save @mish-tv/sortable-list