@omakase-ui/react-sortable-list š
You should focus the features of your app, not DnD boilerplate.
Features
Install
yarn add @omakase-ui/react-sortable-list
Usage
Use Case 1: ItemRender
export const ItemRenderExample: React.VFC = () => {
const [items, setItems] = useState<SortableItemProps[]>([
{ id: '1', name: 'Item 1' },
{ id: '2', name: 'Item 2' },
{ id: '3', name: 'Item 3' },
]);
return (
<SortableList
items={items}
setItems={setItems}
itemRender={({ item }: ItemRenderProps) => (
<div className="w-1/2 h-10 m-8 bg-blue-400 text-center">
{item.name}
</div>
)}
/>
);
};
Use Case 2: Children
export const ChildrenExample: React.VFC = () => {
const [items, setItems] = useState<SortableItemProps[]>([
{ id: '1', name: 'Item 1' },
{ id: '2', name: 'Item 2' },
]);
return (
<SortableList items={items} setItems={setItems}>
{({ items }: { items: SortableItemProps[] }) => (
<>
{items.map((item: SortableItemProps) => (
<SortableItem key={item.id} id={item.id}>
{item.name}
</SortableItem>
))}
</>
)}
</SortableList>
);
};
Use Case 3: Custom Drag Handler
const DragHandler = (props) => (
<div
{...props}
className=" flex justify-center items-center h-8 w-8 rounded border m-4 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 hover:bg-blue-500 hover:text-white duration-300"
>
<div className="" title="drag handler">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-6 h-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3 7.5L7.5 3m0 0L12 7.5M7.5 3v13.5m13.5 0L16.5 21m0 0L12 16.5m4.5 4.5V7.5"
/>
</svg>
</div>
</div>
);
export const DragHandleExample: React.VFC = () => {
const [items, setItems] = useState<SortableItemProps[]>([
{ id: '1', name: 'Item 1' },
{ id: '2', name: 'Item 2' },
{ id: '3', name: 'Item 3' },
]);
return (
<SortableList items={items} setItems={setItems}>
{({ items }: { items: SortableItemProps[] }) => (
<div className="space-y-4">
{items.map((item: SortableItemProps) => (
<SortableItem
key={item.id}
id={item.id}
DragHandler={DragHandler}
className="flex border items-center w-40"
>
<div>{item.name}</div>
</SortableItem>
))}
</div>
)}
</SortableList>
);
};
Use Case 4: Horizontal Sortable List
export const HorizontalExample: React.VFC = () => {
const [items, setItems] = useState<SortableItemProps[]>([
{ id: '1', name: 'Item 1' },
{ id: '2', name: 'Item 2' },
{ id: '3', name: 'Item 3' },
]);
return (
<div className="flex space-x-4">
<SortableList
items={items}
setItems={setItems}
itemRender={({ item }: ItemRenderProps) => <Item name={item.name} />}
horizontal
/>
</div>
);
};
Development
Storybook
Run inside another terminal:
yarn storybook
Example
Then run the example inside another:
yarn link
cd example
yarn link "@omakase-ui/react-sortable-list"
yarn # or yarn to install dependencies
yarn start
Run tests
yarn run test
Author
š¤ Thaddeus Jiang
Show your support
Give a āļø if this project helped you!
š License
Copyright Ā© 2022 Thaddeus Jiang.
This project is MIT licensed.
This README was generated with ā¤ļø by readme-md-generator
