draggable-list-items

Drag-and-Drop List Component

Overview

Drag-and-Drop List is a reusable React component for creating interactive and customizable draggable lists. Built with Tailwind CSS and the powerful dnd-kit library, this component provides a smooth drag-and-drop experience for rearranging list items.

Features

• Intuitive Drag-and-Drop: Rearrange items seamlessly with a fluid and responsive user interface.
• Customizable Design: Easily adapt the styles using Tailwind CSS or your own CSS.
• Lightweight and Fast: Built with modern technologies for optimal performance.

Demo

• Check out the demo here: https://draggable-list-items.vercel.app/

Installation

Install the library via npm:

npm install draggable-list-items

Usage

Here’s an example of how to use the Drag-and-Drop List in your project:

JavaScript Example

import DraggableList from 'draggable-list-items';

const items = [
  { id: 1, title: 'Item 1', description: 'Description 1', image: 'https://via.placeholder.com/150' },
  { id: 2, title: 'Item 2', description: 'Description 2', image: 'https://via.placeholder.com/150' },
  { id: 3, title: 'Item 3', description: 'Description 3', image: 'https://via.placeholder.com/150' },
];

function App() {
  return <DraggableList items={items} />;
}

export default App;

TypeScript Example

import DraggableList from 'draggable-list-items';

type Item = {
  id: number;
  title: string;
  description: string;
  image: string;
};

const items: Item[] = [
  { id: 1, title: 'Item 1', description: 'Description 1', image: 'https://via.placeholder.com/150' },
  { id: 2, title: 'Item 2', description: 'Description 2', image: 'https://via.placeholder.com/150' },
  { id: 3, title: 'Item 3', description: 'Description 3', image: 'https://via.placeholder.com/150' },
];

function App() {
  return <DraggableList items={items} />;
}

export default App;

Styling

The component is styled using Tailwind CSS. Ensure you have Tailwind set up in your project, or use the bundled styles provided with the library:

import 'draggable-list-items/dist/styles.css';

---

How It Works

The Drag-and-Drop List uses the following technologies:

• React: A declarative JavaScript library for building user interfaces.
• dnd-kit: A lightweight and flexible drag-and-drop library for React.
• Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.

---

Contributing

We welcome contributions to improve the Drag-and-Drop List component. If you’d like to contribute:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/new-feature).
3. Make your changes and test thoroughly.
4. Submit a pull request.

---

Changelog

Check out the Releases for details on new features, bug fixes, and updates.

---

Contributions

If you encounter any issues or have questions, feel free to open an issue.