React Drag Cards

Sneak peek

Demo Link 🔗

Table of Contents

• Description
• Features
• Installation
• Usage
• API Reference
• Contributing
• License
• Acknowledgements

Description

React Drag Cards is a simple and customizable drag-and-drop card component for React applications. It allows users to interactively rearrange cards within a container, making it ideal for use cases like Kanban boards, task lists, or any scenario requiring card manipulation.

Features

• Drag and drop functionality
• Easy to customize
• Lightweight and efficient
• Responsive design
• Supports React and Tailwind css

Installation

You can install the package via npm:

npm install react-drag-cards

Usage

Here's a quick example of how to use the React Drag Cards component in your application:

import React from 'react';
import DragCards from './DragCards';

const App = () => {
  const cards = [
    {
      src: "https://assets.playgroundai.com/346dd2b5-47b7-4c0d-b0b4-bbf3e6cd249c.jpg",
      alt: "Example image 1",
      rotate: "6deg",
      top: "20%",
      left: "25%",
      className: "w-36 md:w-56"
    },
    {
      src: "https://images.playground.com/761f186aa1be4904ad6f5b18586377aa.jpeg",
      alt: "Example image 3",
      rotate: "-6deg",
      top: "20%",
      left: "40%",
      className: "w-32 md:w-60"
    },

// Add More Images

  ];

  return (
    <DragCards
      title="SPACE"
      titleColor="text-blue-800"
      accentColor="text-red-500"
      backgroundColor="bg-black"
      cards={cards}
    />
  );
};

export default App;

API Reference

Props

| Prop | Type | Description | | -------- | -------- | ---------------------------------------------------------------------------- | | cards | Array | An array of card objects. Each card should have an id and content field. | | onDrop | Function | Callback function fired when cards are dropped. |

Contributing

We welcome contributions! Please read the CONTRIBUTING.md for details on our code of conduct and the process for submitting pull requests.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Acknowledgements

• Inspired by various drag-and-drop libraries.

react-drag-cards
├─ .git
│  ├─ COMMIT_EDITMSG
│  ├─ config
│  ├─ description
│  ├─ fsmonitor--daemon
│  │  └─ cookies
│  ├─ HEAD
│  ├─ hooks
│  │  ├─ applypatch-msg.sample
│  │  ├─ commit-msg.sample
│  │  ├─ fsmonitor-watchman.sample
│  │  ├─ post-update.sample
│  │  ├─ pre-applypatch.sample
│  │  ├─ pre-commit.sample
│  │  ├─ pre-merge-commit.sample
│  │  ├─ pre-push.sample
│  │  ├─ pre-rebase.sample
│  │  ├─ pre-receive.sample
│  │  ├─ prepare-commit-msg.sample
│  │  ├─ push-to-checkout.sample
│  │  ├─ sendemail-validate.sample
│  │  └─ update.sample
│  ├─ index
│  ├─ info
│  │  └─ exclude
│  ├─ objects
│  │  ├─ 11
│  │  │  └─ 371e9addd6815085eabadb7077405f3c7e546d
│  │  ├─ 23
│  │  │  └─ 8d2e4e6436b353404369d9a59fda5f1f980657
│  │  ├─ 2a
│  │  │  └─ 76491572a66a83110c0c5f615aa8958e02fd3e
│  │  ├─ 2e
│  │  │  └─ 7af2b7f1a6f391da1631d93968a9d487ba977d
│  │  ├─ 2f
│  │  │  └─ c84199e034dd22b7cfd286ddb334ce33abe300
│  │  ├─ 63
│  │  │  └─ 8ecbe17d8fae92693290ef80bcf7702160bbc6
│  │  ├─ 7a
│  │  │  └─ 470ce5c61fb00fc180c7b155b6bb79f9baddf9
│  │  ├─ 7f
│  │  │  └─ ffacebe185072853bb5e113f79a6c7ce652f84
│  │  ├─ 85
│  │  │  └─ d97aa237cfc8dae365e7d87827062d9cd0eab0
│  │  ├─ 89
│  │  │  ├─ a305e028000a86c03e85344e31eb59d56354a0
│  │  │  └─ f91e54dc6f03e3953a071b1e217e6ed9dd4f0a
│  │  ├─ 98
│  │  │  └─ 1242b0c8e665ee747537b23d7986e2278df969
│  │  ├─ a3
│  │  │  └─ b7af3c7c3284a948bdb3f039479a23f6ac0fe3
│  │  ├─ a5
│  │  │  ├─ 47bf36d8d11a4f89c59c144f24795749086dd1
│  │  │  └─ 66af7229dd3cf2c65633200be063054337b9f4
│  │  ├─ bd
│  │  │  └─ 6213e1dfe6b0a79ce7d8b37d0d2dc70f0250bb
│  │  ├─ df
│  │  │  └─ 09b04204ced0f202c42ecdfaf143f026654756
│  │  ├─ ef
│  │  │  └─ 5961e8eff2af2048955b5a24727960bf51c5fd
│  │  ├─ info
│  │  └─ pack
│  └─ refs
│     ├─ heads
│     │  └─ main
│     ├─ remotes
│     │  └─ origin
│     │     └─ main
│     └─ tags
├─ .gitignore
├─ babel.config.js
├─ eslint.config.js
├─ index.html
├─ package-lock.json
├─ package.json
├─ postcss.config.js
├─ README.md
├─ src
│  ├─ App.jsx
│  ├─ DragCards.jsx
│  └─ index.css
├─ tailwind.config.js
├─ vite.config.js
└─ webpack.config.js