A simplified wrapper component of react-beautiful-dnd library
npm install react-beautiful-dnd-wrapperA simplified component that wraps the react-beautiful-dnd library, providing single and nested levels drag and drop functionalities.
Current react-beautiful-dnd library is not supported for react > 18. Please Update strictMode setting to false.
To install the package, use npm or yarn or pnpm:
``bash`
npm install react-beautiful-dnd-wrapperor
yarn add react-beautiful-dnd-wrapperor
pnpm install react-beautiful-dnd-wrapper
Here's examples of components provided by the react-beautiful-dnd-wrapper library.
`tsx
import { useState } from "react";
import { DragIndicatorSVG } from "@/icons";
import { DragAndDrop } from "react-beautiful-dnd-wrapper";
type Item = {
id: string;
label: string;
};
export default function Home() {
const [list, setList] = useState
{ id: "Item-1", label: "Item 1" },
{ id: "Item-2", label: "Item 2" },
{ id: "Item-3", label: "Item 3" },
{ id: "Item-4", label: "Item 4" },
]);
return (
list={list}
type="parent"
droppableId="parent"
onParentSort={(list) => setList(list)}
className="grid gap-5 border bg-white p-10"
>
{({ item, DragHandler }) => {
return (
{item.label}
);
}}
);
}
`
`tsx
import { useState } from "react";
import { DragIndicatorSVG } from "@/icons";
import { DragAndDrop } from "react-beautiful-dnd-wrapper";
type Item = {
id: string;
label: string;
};
type List = {
id: string;
label: string;
items: Item[];
};
export default function Nested() {
const [list, setList] = useState
{
id: "category-1",
label: "Category 1",
items: [
{ id: "item-1", label: "Item 1" },
{ id: "item-2", label: "Item 2" },
],
},
{
id: "category-2",
label: "Category 2",
items: [],
},
]);
return (
className="grid gap-5 border bg-white p-10"
list={list}
droppableId="parent"
type="parent"
onParentSort={(list) => setList(list)}
onSameParentChildSort={(id, items) => {
setList((state) =>
state.map((item) => (item.id === id ? { ...item, items } : item))
);
}}
onDifferentParentChildSort={({
sourceItems,
sourceParentId,
destinationItems,
destinationParentId,
}) => {
setList((state) =>
state.map((item) =>
item.id === sourceParentId
? { ...item, items: sourceItems }
: item.id === destinationParentId
? { ...item, items: destinationItems }
: item
)
);
}}
>
{({ item, DragHandler }) => {
return (
{item.label}
list={item.items}
droppableId={item.id}
className="grid gap-5"
renderEmpty={() => (
No item available!
)}
>
{({ item, DragHandler }) => (
{item.label}
)}
);
}}
);
}
`
The main component for creating drag-and-drop functionality.
| Prop | Description |
|-----------------|------------------------------------------------------|
| list | An array of items to be draggable. |onParentSort
| | A function called when the items are reordered. |className
| | Optional class name for the droppable container. |droppableId
| | The ID of the droppable container. |type
| | The type of the droppable area ("parent" or "child").|style
| | Optional inline styles for the droppable container. |renderEmpty
| | Optional function to render when the list is empty. |children
| | A function that renders the draggable items. |
A component for nested drag-and-drop functionality.
#### Props
| Prop | Description |
|-------------------------------|-----------------------------------------------------------------------|
| list | An array of categories, each containing an array of items. |onParentSort
| | A function called when the categories are reordered. |onSameParentChildSort
| | A function called when items within the same category are reordered. |onDifferentParentChildSort
| | A function called when items are moved between different categories. |className
| | Optional class name for the droppable container. |droppableId
| | The ID of the droppable container. |type
| | The type of the droppable area ("parent" or "child"). |style
| | Optional inline styles for the droppable container. |renderEmpty
| | Optional function to render when the list is empty. |children` | A function that renders the draggable items. |
|
MIT