Description

This a funny puzzle game. Only adding one image your can slice it into what ever pieces you want to make it more complex.

Installation

npm i @sabbir1055/drag-drop-puzzle --save

Uses

import React from 'react'
import Puzzle from '@sabbir1055/drag-drop-puzzle'
function App() {

  const finalResult = (data) => {
    console.log(data)
  }

  return (
      <>
        <Puzzle imgUrl = 'https://cdn.jpegmini.com/user/images/slider_puffin_before_mobile.jpg' getResult = {finalResult}/>
      </>
  )
}

export default App;

Options

drag-drop-puzzle support many options. These are :

Option name	Description	Data Type	Default
width	your full canvas width	numeric	600
height	your full canvas height	numeric	600
XLength	How many pieces do yout need for X axis	numeric	4
YLength	How many pieces do yout need for Y axis	numeric	4
imgUrl	Image url that will be splices into XLength * YLength pieces	string
parentClass	Style your outer canvas	string	null
childClass	Style your inner elements of canvas	string	null
getResult	callback function that return the result	string	return success or keep trying

Git repository

If you want to contribute click here