# react-drag-drop-container-typescript

> Drag & Drop Container in TypeScript

Latest version **1.4.1** (published 2022-06-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-drag-drop-container-typescript
pnpm add react-drag-drop-container-typescript
yarn add react-drag-drop-container-typescript
bun add react-drag-drop-container-typescript
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.1 |
| Published | 2022-06-27 |
| First published | 2022-03-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 0 |
| Unpacked size | 119.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | João Fernandes |
| Maintainers | 0rangefox |
| Keywords | drag, drop, dnd, react |

## Links

- npm: https://www.npmjs.com/package/react-drag-drop-container-typescript
- Repository: https://github.com/0rangeFox/react-drag-drop-container-typescript
- Homepage: https://github.com/0rangeFox/react-drag-drop-container-typescript#readme
- Issues: https://github.com/0rangeFox/react-drag-drop-container-typescript/issues
- npm.io page: https://npm.io/package/react-drag-drop-container-typescript

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.4.1 (latest) — 2022-06-27
- 1.4.0 — 2022-04-01
- 1.3.3 — 2022-03-13
- 1.3.2 — 2022-03-12
- 1.2.0 — 2022-03-05
- 1.1.2 — 2022-03-04
- 1.1.1 — 2022-03-04
- 1.1.0 — 2022-03-04
- 1.0.2 — 2022-03-03

## README

<h1 align="center"><img src="https://cdn.iconscout.com/icon/free/png-32/typescript-1174965.png" /> DragDropContainer and DropTarget</h1>
<h6 align="center"><a href="https://www.npmjs.com/package/react-drag-drop-container-typescript" ><img src="https://img.shields.io/npm/v/react-drag-drop-container-typescript.svg?style=flat-square" /></a></h6>

> 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](https://github.com/peterh32), this is just maintenance and improvements of the [old library](https://github.com/peterh32/react-drag-drop-container).

## 💾 Installation
```bash
# NPM
npm install react-drag-drop-container-typescript

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

## ⌨️ Code example
Only **single** target key:
```typescript jsx
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:
```typescript jsx
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](https://github.com/peterh32) 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](https://github.com/VictoriaTheBrave) who made an amazing clean code and performance improvements, just took her code from PRs ([#40](https://github.com/peterh32/react-drag-drop-container/pull/40) / [#43](https://github.com/peterh32/react-drag-drop-container/pull/43))

## 📝 License
Copyright © 2022 [João Fernandes](https://github.com/0rangeFox). <br/>
This project is [MIT](https://github.com/0rangeFox/react-drag-drop-container-typescript/blob/master/LICENSE) licensed.

---
_Source: https://npm.io/package/react-drag-drop-container-typescript · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._