{"_id":"@3rg0n/breakout404-react","_rev":"2-76168ca521864db315575bcc88a9c7ef","name":"@3rg0n/breakout404-react","dist-tags":{"latest":"0.6.1"},"versions":{"0.6.0":{"name":"@3rg0n/breakout404-react","version":"0.6.0","keywords":["404","breakout","game","react","nextjs"],"license":"MIT","_id":"@3rg0n/breakout404-react@0.6.0","maintainers":[{"name":"3rg0n","email":"ergoncopeland@hotmail.com"}],"dist":{"shasum":"e95816856fb2d1ccdbdb310df64807dafa2ccfdf","tarball":"https://registry.npmjs.org/@3rg0n/breakout404-react/-/breakout404-react-0.6.0.tgz","fileCount":6,"integrity":"sha512-hl/FFBEv23KEd+VeFffgukQHs8bt1ubgUebCCyHG28uBenoBY8fYQ3RyAJxDIBwWvXJLJvS9VSDm9WRoxUtnLA==","signatures":[{"sig":"MEUCIQCPRzh3QyK8m2hs30Ij86c8e9UPKWyOYxx2PTqezSlbLAIgbH87+YB1mcTPQyZJNVNIpCDx1S1Tsg7LrYcLwmdVW4E=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9803},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"dev":"tsup src/index.ts --format cjs,esm --dts --watch","build":"tsup src/index.ts --format cjs,esm --dts","clean":"rimraf dist"},"_npmUser":{"name":"3rg0n","email":"ergoncopeland@hotmail.com"},"description":"React component for Breakout404 - a Breakout-style 404 page game","directories":{},"_nodeVersion":"26.0.0","dependencies":{"@3rg0n/breakout404-core":"0.6.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","react":"^18.3.1","rimraf":"^5.0.10","typescript":"^5.9.3","@types/react":"^18.3.28"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/breakout404-react_0.6.0_1788378558989_0.48484909147187993","host":"s3://npm-registry-packages-npm-production"}},"0.6.1":{"name":"@3rg0n/breakout404-react","version":"0.6.1","description":"React component for Breakout404 - a Breakout-style 404 page game","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"keywords":["404","breakout","game","react","nextjs"],"license":"MIT","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"dependencies":{"@3rg0n/breakout404-core":"0.6.1"},"devDependencies":{"@types/react":"^18.3.28","react":"^18.3.1","rimraf":"^5.0.10","tsup":"^8.5.1","typescript":"^5.9.3"},"scripts":{"build":"tsup src/index.ts --format cjs,esm --dts","dev":"tsup src/index.ts --format cjs,esm --dts --watch","clean":"rimraf dist"},"_nodeVersion":"26.0.0","_id":"@3rg0n/breakout404-react@0.6.1","dist":{"integrity":"sha512-RfbzstpkJuW78EHUjc3rAQQo1uiNpQYzJ5gfYIDOzIuCL1MnxXIjJsPuN/NxcTquHRyayvZfC9Iur0rv41c7jA==","shasum":"80d38c5aa230dcf5f515e3b6d8360b3ec27183dd","tarball":"https://registry.npmjs.org/@3rg0n/breakout404-react/-/breakout404-react-0.6.1.tgz","fileCount":7,"unpackedSize":13515,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBWiFQd6TtoCrd/YhY2uOUTZA755l244++I3muyDGOTjAiBvX/EezFzIqQntEgQzN1+cs6as7H5C6I7izHtcmuN8Hw=="}]},"_npmUser":{"name":"3rg0n","email":"ergoncopeland@hotmail.com"},"directories":{},"maintainers":[{"name":"3rg0n","email":"ergoncopeland@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/breakout404-react_0.6.1_1788440257860_0.4809139422794386"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-02T19:49:18.785Z","modified":"2026-09-03T12:57:38.201Z","0.6.0":"2026-09-02T19:49:19.135Z","0.6.1":"2026-09-03T12:57:37.986Z"},"license":"MIT","keywords":["404","breakout","game","react","nextjs"],"description":"React component for Breakout404 - a Breakout-style 404 page game","maintainers":[{"name":"3rg0n","email":"ergoncopeland@hotmail.com"}],"readme":"# @3rg0n/breakout404-react\n\nReact component for [Breakout404](https://github.com/3rg0n/breakout404) — a customizable 404 page game where visitors destroy blocks arranged to spell \"404\".\n\n**[Live Demo](https://3rg0n.github.io/breakout404/)** · **[Try the 404 page](https://3rg0n.github.io/breakout404/play)**\n\n## Installation\n\n```bash\nnpm install @3rg0n/breakout404-react\n```\n\nRequires React 17 or newer (`react` and `react-dom` are peer dependencies). [`@3rg0n/breakout404-core`](https://www.npmjs.com/package/@3rg0n/breakout404-core) is bundled as a dependency — you don't need to install it separately.\n\n## Usage\n\n### Next.js App Router\n\n```tsx\n// app/not-found.tsx\n'use client';\n\nimport { Breakout404 } from '@3rg0n/breakout404-react';\n\nexport default function NotFound() {\n  return (\n    <div style={{ width: '100vw', height: '100vh' }}>\n      <Breakout404\n        difficulty=\"medium\"\n        showScore\n        onComplete={() => console.log('Game complete!')}\n      />\n    </div>\n  );\n}\n```\n\nThe `'use client'` directive is required — the game renders to a canvas and needs the browser.\n\n### Next.js Pages Router\n\n```tsx\n// pages/404.tsx\nimport { Breakout404 } from '@3rg0n/breakout404-react';\n\nexport default function NotFound() {\n  return (\n    <div style={{ width: '100vw', height: '100vh' }}>\n      <Breakout404 difficulty=\"medium\" redirectUrl=\"/\" />\n    </div>\n  );\n}\n```\n\n### Sizing\n\nThe component renders a `div` that fills its parent, so give the parent an explicit size. Style it directly with `className` or `style`:\n\n```tsx\n<Breakout404 className=\"my-game\" style={{ height: '60vh' }} />\n```\n\n## Props\n\n`Breakout404Props` extends `Breakout404Options` from the core package, plus `className` and `style`.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `theme` | `Partial<Breakout404Theme>` | See core docs | Customize colors and fonts |\n| `difficulty` | `'easy' \\| 'medium' \\| 'hard'` | `'medium'` | Game difficulty |\n| `showScore` | `boolean` | `true` | Show score and lives |\n| `onComplete` | `() => void` | - | Called when all blocks are destroyed |\n| `onBlockDestroyed` | `(remaining: number) => void` | - | Called when a block is destroyed |\n| `redirectUrl` | `string` | - | URL to redirect to after completion (http/https/relative only) |\n| `redirectDelay` | `number` | `2000` | Delay before redirect (ms) |\n| `logger` | `Breakout404Logger` | - | Structured logger for game lifecycle events |\n| `className` | `string` | - | Class applied to the container `div` |\n| `style` | `React.CSSProperties` | - | Inline styles for the container `div` |\n\n### Prop updates\n\nChanging `difficulty`, `theme`, `showScore`, `redirectUrl`, `redirectDelay`, or `logger` re-applies to the running game without recreating it. `onComplete` and `onBlockDestroyed` are held in a ref, so you can pass inline arrow functions without forcing the game to rebuild — the game always calls the latest version.\n\nThe instance is created once on mount and `destroy()`d on unmount, so listeners and animation frames are cleaned up correctly under Strict Mode and Fast Refresh.\n\n## Re-exports\n\nEverything public from the core package is re-exported, so you don't need a second import:\n\n```ts\nimport {\n  defaultTheme,\n  mergeTheme,\n  isValidRedirectUrl,\n  DIFFICULTY_SETTINGS,\n  step,\n  type Breakout404Theme,\n  type GameEvent,\n} from '@3rg0n/breakout404-react';\n```\n\n## Security\n\n`redirectUrl` is validated — only `http:`, `https:`, and relative paths are accepted; `javascript:`, `data:` and similar are rejected. See the [threat model](https://github.com/3rg0n/breakout404/blob/master/THREAT_MODEL.md).\n\n## License\n\n[MIT](https://github.com/3rg0n/breakout404/blob/master/LICENSE)\n","readmeFilename":""}