react-draglist-ipo
v1.0.3
Published
This package facilitates the creation of draggable lists in React applications.
Downloads
7
Maintainers
Readme
React Drag List
This package facilitates the creation of draggable lists in React applications.
Installation
You can install the react-draglist-ipo package using npm, yarn, or pnpm.
npm
npm install react-draglist-ipo
yarn
yarn add react-draglist-ipo
pnpm
pnpm add react-draglist-ipo
Usage
Once installed, you can import and use the DragList component in your React application.
"use client";
import React from "react";
import { useDragList } from "react-draglist-ipo";
const initialItems = [
{ id: 0, text: "Wahyu" },
{ id: 1, text: "Agus" },
{ id: 2, text: "Arifin" },
];
export default function App() {
const { items, getItemProps } = useDragList({
initialItems,
});
const COLOR = (n: number) => {
switch (n) {
case 1:
return "bg-red-600 hover:bg-red-800"
case 2:
return "bg-indigo-600 hover:bg-indigo-800"
default:
return "bg-lime-600 hover:bg-lime-800"
}
}
return (
<div className="flex justify-center items-center min-h-screen">
<div className="max-w-3xl">
<ul>
{items?.map((item: any) => (
<li className="flex gap-4 my-2 items-center" key={item.id}>
<button
className={`w-10 h-10 rounded-lg text-2xl ${COLOR(item.id)}`}
{...getItemProps(item.id)}
>
::
</button>
<span>{item?.id + 1} : {item.text}</span>
</li>
))}
</ul>
</div>
</div>
);
}
You can customize the appearance and behavior of the DragList component according to your application requirements.