1.0.3 • Published 3 years ago
@sabbir1055/drag-drop-puzzle v1.0.3
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