0.2.1 • Published 3 years ago

react-dnd-image-puzzle v0.2.1

Weekly downloads
6
License
MIT
Repository
github
Last release
3 years ago

React DnD Image Puzzle

Create a puzzle from an image

Install package

npm install react-dnd-image-puzzle

Your app

import Puzzle from 'react-dnd-image-puzzle';

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

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

export default App;

Props

PropertyTypeRequiredDefaultDescription
imagestringyesImage for the puzzle: an absoulte image URI or an imported image
widthnumberno400Image width
heightnumberno300Image height
piecesnumberno3Number of pieces per side. 3x3 pieces by default
onCompletefuncitonnoCallback when the puzzle is completed