# react-dnd-image-puzzle2

> (Forked from https://github.com/ferthings/react-dnd-image-puzzle)

Latest version **0.3.3** (published 2022-05-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-dnd-image-puzzle2
pnpm add react-dnd-image-puzzle2
yarn add react-dnd-image-puzzle2
bun add react-dnd-image-puzzle2
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.3 |
| Published | 2022-05-27 |
| First published | 2022-05-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 76.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | kecsot |
| Maintainers | kecso.tamas |

## Links

- npm: https://www.npmjs.com/package/react-dnd-image-puzzle2
- npm.io page: https://npm.io/package/react-dnd-image-puzzle2

## Recent versions

- 0.3.3 (latest) — 2022-05-27
- 0.3.2 — 2022-05-17
- 0.3.1 — 2022-05-17
- 0.3.0 — 2022-05-17
- 0.2.22 — 2022-05-05
- 0.2.21 — 2022-05-04
- 0.2.2 — 2022-05-04
- 0.2.1 — 2022-05-04
- 0.2.0 — 2022-05-04
- 0.1.0 — 2022-05-04

## README

# React DnD Image Puzzle
(Forked from https://github.com/ferthings/react-dnd-image-puzzle)

Create a puzzle from an image

## Install package


```sh
npm install react-dnd-image-puzzle2
```

## Your app

```js
import Puzzle from 'react-dnd-image-puzzle2';

function App() {
  const onComplete = () => {
    console.log('Puzzle is completed!');
  };

  return (
    <Puzzle
      image="https://www.laurag.tv/wp-content/uploads/2020/02/bob-esponja.jpg"
      imageWidth={800}
      imageHeight={480}
      height={100}
      width={100}
      pieces={4}
      onSwap={onSwap}
      onComplete={onComplete}
    />
  );
}

export default App;
```

## Props

Property    | Type     | Required | Default | Description
:---        | :---     | :---     | :---    | :---
image       | string   | yes      |         | Image for the puzzle: an absoulte image URI or an imported image
imageWidth       | number   | no       | 400     | Source image width (to keep a.ratio)
imageHeight      | number   | no       | 300     | Source image height (to keep a.ratio)
width       | number   | no       | 400     | Puzzle area width
height      | number   | no       | 300     | Puzzle area height
pieces      | number   | no       | 3       | Number of pieces per side. 3x3 pieces by default
onComplete  | funciton | no       |         | Callback when the puzzle is completed
onSwap      | funciton | no       |         | Callback when the puzzle items swapped
-----

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