Introduction: 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.
React jigsaw puzzle Module: The react-jigsaw-puzzle package provides an easy-to-use component for jigsaw puzzles. The tool has a resizing feature as well as the ability to feed in any image URL without the need for first tiling it. There are some properties that we can set for the puzzle, such as the image source, and we can specify the number of rows and columns it can have. By default, it has three rows and four columns. When the puzzle is solved, we can specify a function to handle it.
The package also provides classes that allow us to override the default style. This package includes the following style classes:
- .jigsaw-puzzle: A container that contains puzzle pieces.
- .jigsaw-puzzle__piece: Piece of the puzzle.
- .jigsaw-puzzle__piece–solved: Puzzle piece in the correct spot.
- .jigsaw-puzzle__piece–dragging: A puzzle piece being dragged.
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. Create your own puzzle by following these steps.
Creating 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
Step 4: Modify your project structure. The Directory structure currently looks like this.
Default project directory
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 your index.html file.. Include the following code in your index.html file, located in the public folder of your project directory.
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> |
Step 6: Making the puzzle component in App.js file.
Firstly we will import the jigsawPuzzle component as well as the inbuilt CSS file from the react-jigsaw-puzzle package to use in our project.
import { JigsawPuzzle } from 'react-jigsaw-puzzle/lib'
import 'react-jigsaw-puzzle/lib/jigsaw-puzzle.css'
Then we will add a custom CSS file for overriding some of the default styles.
In the jigsawPuzzle component, we’ll specify the image source. You may use any image of your choice. We will then set the rows and columns to be 3 in order to make a 3*3 puzzle. We will define a function in the onSolved method that will be called once the puzzle is solved successfully. As soon as the pieces are unpuzzled, a congratulations message will replace the heading using useState hooks. In the end, we will introduce a class to style our container.
Add the following code to your app.js file .
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; |
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 8: Your index.js file should look like this. The index.js file serves as the main entry point, and inside it the App.js file is rendered at the root ID of the DOM.
App.js
import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; ReactDOM.render(<App />, document.getElementById("root")); |
Our puzzle is now complete, let’s assemble the pieces and play around.
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.
Our Puzzle
Let’s drag the pieces to solve the puzzle.
Jigsaw-Puzzle-App
Once the puzzle pieces have been assembled, a congratulations message will appear.
Solved Puzzle
