Skip to content

adrianbielawski/orderable-list

Repository files navigation

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published