Orderable list

Quick start

$ npm i @adrianbielawski/orderable-list

See examples

import OrderableList, {
  OnDropParams,
  OnRemoveParams,
} from "@adrianbielawski/orderable-list";
import ToDoItem from "./toDoItem";

const initialItems = ["Buy something", "Take a walk"];

const ToDoList = () => {
  const [items, setItems] = useState<string[]>(initialItems);

  const handleAdd = (value: string) => {
    setItems([value, ...items]);
  };

  const handleDrop = (params: OnDropParams<string>) => {
    setItems(params.newItems);
  };

  const handleRemove = (params: OnRemoveParams<string>) => {
    setItems(params.newItems);
  };

  return (
    <>
      <YourFancyForm onSubmit={handleAdd} />
      <OrderableList
        items={items}
        itemComponent={ToDoItem}
        onDrop={handleDrop}
        onRemove={handleRemove}
      />
    </>
  );
};

Orderable list props

| Name | Type | Description | | ------------------ | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | items | any[] | Array of items displayed on the list. | | itemComponent | React component | Learn more in ItemComponent docs. | | className | string | Class name for <ul> element. | | itemClassName | string | Class name for <li> element. | | animationDirection | 'right' or 'left' | Direction of animation on removed item. Initial 'left'. | | scrollTopAt | number | Scroll body when grabbed element reach n pixels from the top. Initial 30. | | scrollBottomAt | number | Scroll body when grabbed element reach n pixels from the bottom. Initial 30. | | onDrop | function | Use it to change your state of list items after reordering. Function takes params: OnDropParams<T> object with { newPosition: number, item: T, newItems: T[] }. | | onRemove | function | Use it to change your state of list items after removing. Function takes params: OnRemoveParams<T> object with { item: T, newItems: T[] }. |

Item component

Create your ItemComponent which optionally contains Grabbable and RemoveButton:

import OrderableList, {
  ItemComponentProps,
} from "@adrianbielawski/orderable-list";

const ToDoItem = (props: ItemComponentProps<string>) => (
  <OrderableList.Grabbable className="to-do-item">
    {params.item}
    <OrderableList.RemoveButton className="remove-button">
      Remove
    </OrderableList.RemoveButton>
  </OrderableList.Grabbable>
);

export default ToDoItem;

See examples for different scenarios

ItemComponent takes following props

| Name | Type | Description | | ------- | ------- | --------------------------------------------------- | | item | any | Item from the items array passed to OrderableList | | index | number | Current position on the list starts from 0 | | grabbed | boolean | true if user grab this item |