Have ideas to improve npm?Join in the discussion! »

    @sabbir1055/drag-drop-puzzle

    1.0.3 • Public • Published

    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 alt text
    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

    Install

    npm i @sabbir1055/drag-drop-puzzle

    DownloadsWeekly Downloads

    0

    Version

    1.0.3

    License

    ISC

    Unpacked Size

    11.4 kB

    Total Files

    3

    Last publish

    Collaborators

    • avatar