Puzzle using react-jigsaw-puzzle package

Last Updated : 04 Dec, 2023

A jigsaw puzzle is a great way to unwind at home after a long day. While searching, finding, assembling, and ultimately seeing the puzzle scene come together, is exciting. But what is even more fascinating is how easy it is to design your own jigsaw puzzle. This article will show you how to make a jigsaw puzzle step by step using the react-jigsaw-puzzle package.

Prerequisites

Approach

We will create a puzzle consisting of 3 rows and 3 columns using the react-jigsaw-puzzle package. You can use any image of your choice without worrying about having to break it into tiles. We will style the puzzle piece container using the jigsaw-puzzle CSS class. By using useState hooks, we will display a congratulations text if the puzzle is solved.

Steps to create React Application And Installing Module

Step 1: Make a project directory, head over to the terminal, and create a react app named “jigsaw-puzzle” using the following command:

npx create-react-app jigsaw-puzzle

Step 2: After the jigsaw-puzzle app is created, switch to the new folder jigsaw-puzzle using the following command:

cd jigsaw-puzzle

Step 3: After creating the React application, Install the react-jigsaw-puzzle package using the following command:

npm install react-jigsaw-puzzle

Project Structure:

We will modify the folder and keep the files we need for this project. Create a puzzle.css file to style our component. Now, make sure your file structure looks like this

Final project directory Structure.

Step 5: Add code in the respective files

App.js

import React, { useState } from "react";
import "./App.css";
import "./puzzle.css";
import { JigsawPuzzle } from "react-jigsaw-puzzle/lib";
import "react-jigsaw-puzzle/lib/jigsaw-puzzle.css";
import img from "./gfgg.png";
 
function App() {
    const [text, setText] = useState("Unpuzzle the pieces!!");
     
    const set = () => {
        setText("Congratulations!!");
    };
     
    return (
        <>
            <h2 className="tag">{text}</h2>
            <JigsawPuzzle
                imageSrc={img}
                rows={3}
                columns={3}
                onSolved={set}
                className="jigsaw-puzzle"
            />
        </>
    );
}
 
export default App;

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1" />
    <meta name="theme-color"
          content="#000000" />
    <meta name="description"
          content="Web site created using create-react-app" />
    <title>React jigsaw Puzzle</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

puzzle.css

/* for the heading  */
.tag {
    text-align: center;
    color: green;
    margin: 2rem;
}
 
/* for the jigsaw puzzle container */
.jigsaw-puzzle {
    width: 38%;
    height: 38%;
    border: 2px solid black;
    margin: auto;
    box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.25);
}

Step 7: Let’s style our heading and the Jigsaw puzzle component. Add the following code in your puzzle.css file.

puzzle.css

/* for the heading  */
.tag {
    text-align: center;
    color: green;
    margin: 2rem;
}
 
/* for the jigsaw puzzle container */
.jigsaw-puzzle {
    width: 38%;
    height: 38%;
    border: 2px solid black;
    margin: auto;
    box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.25);
}

Step to run the application: Run the application by using the following command:

npm start

Output: By default, the React project will run on port 3000. You can access it at localhost:3000 on your browser. This is how our project looks.