React-dnd-image-puzzle2 NPM

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