react-drag-drop-container-typescript

DragDropContainer and DropTarget

A ReactJS library with Drag and Drop functionality for mouse and touch devices.

🔖 Description

The following library allows us to create Drag & Drop interactions more effectively and natively without using HTML5. This library was not made by me, but by Peter Hollingsworth, this is just maintenance and improvements of the old library.

💾 Installation

# NPM
npm install react-drag-drop-container-typescript

# Yarn
yarn add react-drag-drop-container-typescript

⌨️ Code example

Only single target key:

import { DragDropContainer, DropTarget } from 'react-drag-drop-container-typescript';

<DragDropContainer targetKey="foo" >
    <div>Drag Me!</div>
</DragDropContainer>

<DropTarget targetKey="foo" >
    <p>I'm a valid drop target for the object above since we both have the same targetKey!</p>
</DropTarget>

With multiple target keys:

import { DragDropContainer, DropTarget } from 'react-drag-drop-container-typescript';

<DragDropContainer targetKey={[ "foo", "bar" ]} >
    <div>Drag Me!</div>
</DragDropContainer>

<DropTarget targetKey={[ "foo", "bar" ]} >
    <p>I'm a valid drop target for the object above since we both have the same targetKey!</p>
</DropTarget>

🤝 Contributing

This project will always remain open source and any kind of contribution is welcome. By participating in this project, you agree to keep common sense and contribute in a positive way.

📰 Credits

A special thanks to Peter Hollingsworth who had the idea to start this project and to their contributors who also invested the time in making the improvements and bugfixes and another special thanks to Victoria Likhuta who made an amazing clean code and performance improvements, just took her code from PRs (#40 / #43)

📝 License

Copyright © 2022 João Fernandes.
This project is MIT licensed.