# draggula

> Draggula is a Drag and Drop solution for React Native with draggables, targets and snapping.

Latest version **1.0.9** (published 2018-05-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install draggula
pnpm add draggula
yarn add draggula
bun add draggula
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2018-05-30 |
| First published | 2018-05-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 159.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | jondot |

## Links

- npm: https://www.npmjs.com/package/draggula
- npm.io page: https://npm.io/package/draggula

## Dependencies (1)

- [lodash](https://npm.io/package/lodash.md) ^4.17.5

## Recent versions

- 1.0.9 (latest) — 2018-05-30
- 1.0.8 — 2018-05-30
- 1.0.6 — 2018-05-27
- 1.0.5 — 2018-05-27
- 1.0.4 — 2018-05-27
- 1.0.3 — 2018-05-27
- 1.0.2 — 2018-05-27

## README

# Draggula

Draggula is a Drag and Drop solution for React Native with draggables, targets and snapping.

Originally created for games and visualizations, but can be used for other purposes as well.

## Quick Start

Install:

```
$ yarn add draggula
```

Here's an example using draggula. This example implements a puzzle with its set of parts:

```javascript
import draggula from 'draggula'
const { DragProvider, Draggable, DragTarget } = draggula()

const Puzzle = ({ onHits }) => (
  <DragProvider onUpdateHits={onHits}>
    {parts.map(part => (
      <DragTarget key={`target-${part.key}`} accept={part.key}>
        <View
          style={{
            position: 'absolute',
            ...part.layout
          }}
        />
      </DragTarget>
    ))}
    {parts.map(part => (
      <Draggable key={`draggable-${part.key}`} provide={part.key}>
        <Image source={part.image} style={part.layout} />
      </Draggable>
    ))}
  </DragProvider>
)
```

The API revolves around three simple rules:

1.  Everything happens within the context of a `DragProvider` (You can use as many as you like).
2.  Each `Draggable` has a `DragTarget` and both agree if `Draggable#provide === DragTarget.accept`.
3.  The contents of a `Draggable`/`DragTarget` are the first child - so what ever you decide to be creative with; views, images, animation, anything goes.

For a deeper dive (and for a lack of proper docs at this stage), check out the [types](src/types.ts).

A trade-off that was made in favor of performance and simplicity was absolute positioning. Since this library expects absolute positioning (it will not measure/redraw/relayout automatically), expect to handle it yourself if you ever need to.

# Contributing

Fork, implement, add tests, pull request, get my everlasting thanks and a respectable place here :).

### Thanks:

To all [Contributors](https://github.com/jondot/draggula/graphs/contributors) - you make this happen, thanks!

# Copyright

Copyright (c) 2018 [Dotan Nahum](http://gplus.to/dotan) [@jondot](http://twitter.com/jondot). See [LICENSE](LICENSE.txt) for further details.

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