React Drag and Drop List

A simple and customizable drag and drop list component for React applications.

Installation

You can install the package via npm:

npm install react-drag-and-drop-list

or using yarn:

yard add react-drag-and-drop-list

Usage

Import the DragDropList component use it in your React application:

import React from 'react';
import DragDropList from 'react-drag-and-drop-list';
const MyComponent = () => {
  const items = [
    { id: 1, text: 'Item 1' },
    { id: 2, text: 'Item 2' },
    { id: 3, text: 'Item 3' },
  ];
  return (
    <div>
      <h1>My Component</h1>
      <DragDropList items={items} />
    </div>
  );
};
export default MyComponent;

Features

• Drag and drop reordering of items within the list.
• Customizable styling using external CSS or CSS-in-JS solutions.
• Easy integration into existing React applications.

Props

items: An array of objects representing the items in the list. Each object should have an id and text property.

Styles

The component comes with default styling, but you can easily override it by providing your own CSS styles.