{"id":26290948,"url":"https://github.com/yuri-becker/react-jigsaw-puzzle","last_synced_at":"2025-05-08T01:20:54.050Z","repository":{"id":38991076,"uuid":"356324422","full_name":"yuri-becker/react-jigsaw-puzzle","owner":"yuri-becker","description":"🧩 Simple plug-and-play React component for jigsaw puzzles","archived":false,"fork":false,"pushed_at":"2024-01-10T22:23:18.000Z","size":1852,"stargazers_count":29,"open_issues_count":3,"forks_count":14,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-01T07:58:14.643Z","etag":null,"topics":["javascript","jigsaw-puzzle-game","puzzle","puzzle-game","react","react-dom","tiles","typescript"],"latest_commit_sha":null,"homepage":"https://yuri-becker.github.io/react-jigsaw-puzzle/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yuri-becker.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-09T15:53:46.000Z","updated_at":"2025-04-29T12:46:00.000Z","dependencies_parsed_at":"2024-06-18T21:14:29.798Z","dependency_job_id":"eba245bb-3344-4fe5-b742-0e15bc7cdde5","html_url":"https://github.com/yuri-becker/react-jigsaw-puzzle","commit_stats":{"total_commits":8,"total_committers":1,"mean_commits":8.0,"dds":0.0,"last_synced_commit":"9069b4864ca8deb1c4f59fd9a4a983dac18b5d57"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuri-becker%2Freact-jigsaw-puzzle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuri-becker%2Freact-jigsaw-puzzle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuri-becker%2Freact-jigsaw-puzzle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuri-becker%2Freact-jigsaw-puzzle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yuri-becker","download_url":"https://codeload.github.com/yuri-becker/react-jigsaw-puzzle/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252979395,"owners_count":21835044,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","jigsaw-puzzle-game","puzzle","puzzle-game","react","react-dom","tiles","typescript"],"created_at":"2025-03-15T00:25:18.636Z","updated_at":"2025-05-08T01:20:54.028Z","avatar_url":"https://github.com/yuri-becker.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Demo](https://img.shields.io/website?label=Demo\u0026style=for-the-badge\u0026url=https%3A%2F%2Fyuri-becker.github.io/react-jigsaw-puzzle)](https://yuri-becker.github.io/react-jigsaw-puzzle)\n[![NPM](https://img.shields.io/npm/v/react-jigsaw-puzzle?style=for-the-badge)](https://www.npmjs.com/package/react-jigsaw-puzzle)\n[![GLP-3.0 License](https://img.shields.io/github/license/yuri-becker/react-jigsaw-puzzle?style=for-the-badge)](https://github.com/yuri-becker/react-jigsaw-puzzle/blob/main/LICENSE.txt) [![GitHub Repo stars](https://img.shields.io/github/stars/yuri-becker/react-jigsaw-puzzle?style=for-the-badge)](https://github.com/yuri-becker/japp/stargazers)\n[![GitHub Repo stars](https://img.shields.io/github/last-commit/yuri-becker/react-jigsaw-puzzle?style=for-the-badge)](https://github.com/yuri-becker/react-jigsaw-puzzle/commits/main)\n\n\n\u003ch1 align=\"center\"\u003e react-jigsaw-puzzle \u003c/h1\u003e\n\nSimple plug-and-play React component for jigsaw puzzles.\n\nIt supports resizing and can be fed with any image URL without the need to \"tile\" the image first.\n\nCheck out the [Demo](https://yuri-becker.github.io/react-jigsaw-puzzle/) to see if it fits your needs.\n\n\u003cul\u003e\n\u003cli\u003e\n  \u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"#properties\"\u003eProperties\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#styling\"\u003eStyling\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e \u003ca href=\"#drawbacks\"\u003eDrawbacks\u003c/a\u003e \u003c/li\u003e\n\u003cli\u003e \u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n## Usage\n\n```tsx\n// Minimal usage\n\nimport {JigsawPuzzle} from \"react-jigsaw-puzzle/lib\";\nimport \"react-jigsaw-puzzle/lib/jigsaw-puzzle.css\";\n\n\u003cJigsawPuzzle imageSrc=\"https://any.image/url.jpg\" /\u003e;\n```\n\n```tsx\n// With custom amount of rows and columns\n\nimport {JigsawPuzzle} from \"react-jigsaw-puzzle/lib\";\nimport \"react-jigsaw-puzzle/lib/jigsaw-puzzle.css\";\n\n\u003cJigsawPuzzle\n  imageSrc=\"https://any.image/url.jpg\"\n  rows={4}\n  columns={6}\n  onSolved={() =\u003e alert(\"Solved!\")}\n/\u003e;\n```\n\n### Properties\n\n| Name         |    Type    | Purpose                                               |  Default   |\n| ------------ | :--------: | ----------------------------------------------------- | :--------: |\n| **imageSrc** |  _string_  | Source of the image. Can be any URL or relative path. | _required_ |\n| **rows**     |  _number_  | The amount of rows the puzzle will have.              |     3      |\n| **columns**  |  _number_  | The amount of columns the puzzle with have.           |     4      |\n| **onSolved** | _function_ | Called when the puzzle is solved.                     |  () =\u003e {}  |\n\n### Styling\n\nYou can simply override or add styles via plain CSS.\n\nThe following style classes are used:\n\n- `.jigsaw-puzzle` - The container for the puzzle pieces\n- `.jigsaw-puzzle__piece` - Puzzle piece/tile\n- `.jigsaw-puzzle__piece--solved` - Puzzle piece in the correct position\n- `.jigsaw-puzzle__piece--dragging` - Puzzle piece that is being dragged\n\n## Drawbacks\n\n- The component adjusts its height according to the image's aspect ratio.\n  That means if the image has a 2:1 aspect ratio and the width is set or calculated to 800px, the puzzle will be 400px high.\u003cbr/\u003e\n  That is probably what you'll want for landscape images, but portrait or square images can easily expand out of the viewport on desktop screens.\u003cbr/\u003e\n  You can work around this by setting either a fixed width or a width dependent on the viewport height (`vh`).\n- While in theory you can make a 100x100 puzzle, a large tile amount will result in poor render performance.\u003cbr/\u003e\n  This is because each tile is basically rendering the whole image but \"zooms in\".\u003cbr/\u003e\n  If you want to make really large puzzles, this is probably not for you. Still, I decided to not limit the tile amount because computers and phones are getting faster by the day.\n- I built this for a very specific use-case. If you find bugs or want features added, feel free to either create an issue or make a PR.\n- Touch scrolling is disabled while moving a tile by temporarily setting `overflow:hidden` on the `\u003chtml\u003e` element.\u003cbr/\u003e Keep in mind that this does not prevent the navigation bar from moving in and out on mobile phones if the site is larger than the viewport.\n\n\n## Contributing\n\nSince I am not actively working on this component, I **really** appreciate any contribution.\n\nFeel free to create issues for bugs and feature requests and I will see what I can do.\n\nI also highly encourage you to open pull requests for bugfixes, updates and improvements.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuri-becker%2Freact-jigsaw-puzzle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyuri-becker%2Freact-jigsaw-puzzle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuri-becker%2Freact-jigsaw-puzzle/lists"}