React DnD Image Puzzle

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

Create a puzzle from an image

Install package

npm install react-dnd-image-puzzle2

Your app

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