{"_id":"@27works/faster-fixes-react","_rev":"2-59aca793fc2f7a909b4b59ae1fa306f9","name":"@27works/faster-fixes-react","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@27works/faster-fixes-react","version":"0.1.0","keywords":["react","feedback","widget","bug-reporting","visual-feedback","annotation","screenshot","user-feedback","qa","testing","react-component"],"author":{"url":"https://faster-fixes.com","name":"FasterFixes","email":"support@faster-fixes.com"},"license":"MIT","_id":"@27works/faster-fixes-react@0.1.0","maintainers":[{"name":"jimlambie","email":"jameslambie@gmail.com"},{"name":"woogz","email":"jayraydon@gmail.com"}],"homepage":"https://github.com/27Works/faster-fixes/tree/main/packages/widget-react","bugs":{"url":"https://github.com/27Works/faster-fixes/issues"},"dist":{"shasum":"7018b76667f4fbdcdff0bdc3f1a1d2448e397d86","tarball":"https://registry.npmjs.org/@27works/faster-fixes-react/-/faster-fixes-react-0.1.0.tgz","fileCount":10,"integrity":"sha512-W+TTmuTRNcXrU7p3FMLNf0kRFc+OZ1ZqwncFRFMCN/Kiw1wNlmnpQI4fuK4SJQLHeeQzcbA07s4W9k1TIxrj+Q==","signatures":[{"sig":"MEYCIQDZoX+YlVFv3iyu8t81Zz/Do7pheVua2bPFQAxz/SiLGgIhAL/y2SiwigJGb/mh5L8TKFL2tdkyEf7ywZn2a+hvwQW6","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":70013},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"default":"./dist/index.js"},"./internal":{"types":"./dist/internal.d.ts","import":{"types":"./dist/internal.d.ts","default":"./dist/internal.js"},"default":"./dist/internal.js"}},"gitHead":"4c127bebaef842c16dec8c64c4be953f0b46a44f","scripts":{"lint":"eslint . --max-warnings 0","build":"tsdown","typecheck":"tsc --noEmit"},"_npmUser":{"name":"jimlambie","email":"jameslambie@gmail.com"},"repository":{"url":"git+https://github.com/27Works/faster-fixes.git","type":"git","directory":"packages/widget-react"},"_npmVersion":"10.9.8","description":"Fork of @fasterfixes/react with scroll-aware screenshot capture. Drop-in component for collecting visual feedback with screenshots, element annotations, and inline comments.","directories":{},"sideEffects":false,"_nodeVersion":"22.22.3","dependencies":{"@fasterfixes/core":"workspace:*","modern-screenshot":"^4.6.8","@floating-ui/react":"^0.27.16"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^9.39.1","tsdown":"^0.21.4","typescript":"^5.9.3","@types/react":"^19.2.9","@types/react-dom":"^19.2.3","@workspace/eslint-config":"workspace:*","@workspace/typescript-config":"workspace:*"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/faster-fixes-react_0.1.0_1788905218724_0.08670828427336197","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"_id":"@27works/faster-fixes-react@0.2.0","bugs":{"url":"https://github.com/27Works/faster-fixes/issues"},"dist":{"shasum":"565c06e8343020cc6e48afbed6f95c4ca330d3d7","tarball":"https://registry.npmjs.org/@27works/faster-fixes-react/-/faster-fixes-react-0.2.0.tgz","fileCount":10,"integrity":"sha512-svP0tlK5T+0dtR4As500ZQtmK+un0wCLJs4bpcvLZQFmCCv6phuloX/Y7OgEhGduGeqxothFNfzhMteu2ELxZA==","signatures":[{"sig":"MEUCIHtpmQimPZzZWvkLDOdGEvEoVAV+CN0FIlEvUjRtKfgSAiEAtK5sF0UBWHZNxBuFkzm1mREnQ3+GWPpnqRfvUPwWXfI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCQ/zFWa+YnW+8AfogBvauC0tZo/XdLw8DmORYcPU5c+AIhAOggug8zllE9eBetCz/EqHADukF3bbdcL6nkdHB5aFS6"}],"unpackedSize":70012},"main":"./dist/index.js","name":"@27works/faster-fixes-react","type":"module","types":"./dist/index.d.ts","author":{"url":"https://faster-fixes.com","name":"FasterFixes","email":"support@faster-fixes.com"},"module":"./dist/index.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"default":"./dist/index.js"},"./internal":{"types":"./dist/internal.d.ts","import":{"types":"./dist/internal.d.ts","default":"./dist/internal.js"},"default":"./dist/internal.js"}},"gitHead":"6a6f6f3d6a61a1eb6dd208f32f699dc2783373ef","license":"MIT","scripts":{"lint":"eslint . --max-warnings 0","build":"tsdown","typecheck":"tsc --noEmit"},"version":"0.2.0","_npmUser":{"name":"jimlambie","email":"jameslambie@gmail.com"},"homepage":"https://github.com/27Works/faster-fixes/tree/main/packages/widget-react","keywords":["react","feedback","widget","bug-reporting","visual-feedback","annotation","screenshot","user-feedback","qa","testing","react-component"],"repository":{"url":"git+https://github.com/27Works/faster-fixes.git","type":"git","directory":"packages/widget-react"},"_npmVersion":"10.9.8","description":"Fork of @fasterfixes/react with scroll-aware screenshot capture. Drop-in component for collecting visual feedback with screenshots, element annotations, and inline comments.","directories":{},"maintainers":[{"name":"jimlambie","email":"jameslambie@gmail.com"},{"name":"woogz","email":"jayraydon@gmail.com"}],"sideEffects":false,"_nodeVersion":"22.22.3","dependencies":{"@fasterfixes/core":"workspace:*","modern-screenshot":"^4.6.8","@floating-ui/react":"^0.27.16"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^9.39.1","tsdown":"^0.21.4","typescript":"^5.9.3","@types/react":"^19.2.9","@types/react-dom":"^19.2.3","@workspace/eslint-config":"workspace:*","@workspace/typescript-config":"workspace:*"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/faster-fixes-react_0.2.0_1788923462856_0.5106828588171959"}}},"time":{"created":"2026-09-08T22:06:58.501Z","modified":"2026-09-09T03:11:03.113Z","0.1.0":"2026-09-08T22:06:58.878Z","0.2.0":"2026-09-09T03:11:02.945Z"},"bugs":{"url":"https://github.com/27Works/faster-fixes/issues"},"author":{"url":"https://faster-fixes.com","name":"FasterFixes","email":"support@faster-fixes.com"},"license":"MIT","homepage":"https://github.com/27Works/faster-fixes/tree/main/packages/widget-react","keywords":["react","feedback","widget","bug-reporting","visual-feedback","annotation","screenshot","user-feedback","qa","testing","react-component"],"repository":{"url":"git+https://github.com/27Works/faster-fixes.git","type":"git","directory":"packages/widget-react"},"description":"Fork of @fasterfixes/react with scroll-aware screenshot capture. Drop-in component for collecting visual feedback with screenshots, element annotations, and inline comments.","maintainers":[{"name":"jimlambie","email":"jameslambie@gmail.com"},{"name":"woogz","email":"jayraydon@gmail.com"}],"readme":"# @27works/faster-fixes-react\n\n> Fork of [`@fasterfixes/react`](https://github.com/manucoffin/faster-fixes), MIT licensed.\n> Published under our own scope to fix scroll-aware screenshot capture — see\n> [NOTICE](./NOTICE) and [Known limitations](#known-limitations) below. Public API and\n> wire protocol are otherwise byte-for-byte compatible with upstream: swap the import,\n> nothing else changes.\n\n> **[Documentation](https://faster-fixes.com/docs)** · [Website](https://faster-fixes.com)\n\nReact feedback widget for [FasterFixes](https://faster-fixes.com) — collect visual feedback with screenshots, element annotations, and inline comments.\n\n## Installation\n\n```bash\nnpm install @27works/faster-fixes-react\n```\n\nThe `projectId` prop requires `@fasterfixes/react` version 0.0.9 or later (this fork starts from that baseline).\n\n## Quick start\n\nWrap your app with `FeedbackProvider`:\n\n```tsx\nimport { FeedbackProvider } from \"@27works/faster-fixes-react\";\n\nfunction App() {\n  return (\n    <FeedbackProvider projectId=\"proj_your_project_id\">\n      <YourApp />\n    </FeedbackProvider>\n  );\n}\n```\n\nThat's it. The widget appears as a floating button. Reviewers with a valid token can click elements, annotate them, and submit feedback with automatic screenshots.\n\n### Customize appearance\n\n```tsx\n<FeedbackProvider\n  projectId=\"proj_your_project_id\"\n  color=\"#e63946\"\n  position=\"bottom-left\"\n>\n  <YourApp />\n</FeedbackProvider>\n```\n\n`color` accepts any CSS color value, including CSS variables:\n\n```tsx\n<FeedbackProvider projectId=\"proj_your_project_id\" color=\"var(--brand-primary)\">\n```\n\nThe color is applied as a `--ff-accent` CSS custom property on the widget root. Any `classNames` overrides take precedence.\n\n## How it works\n\n1. A reviewer visits your site with a token link (`?ff_token=...`)\n2. They click the floating widget button to enter feedback mode\n3. They click any element on the page to annotate it\n4. A comment popover appears — they describe the issue and submit\n5. A screenshot is captured automatically and uploaded with the feedback\n6. Feedback pins appear on the page showing existing feedback items\n\n## Props\n\n### `FeedbackProvider`\n\n| Prop         | Type                  | Required | Description                                                       |\n| ------------ | --------------------- | -------- | ---------------------------------------------------------------- |\n| `projectId`  | `string`              | Yes      | Your Faster Fixes Project ID (found in project settings)         |\n| `apiKey`     | `string`              | No       | Deprecated alias for `projectId`; removed in a future major.     |\n| `apiOrigin`  | `string`              | No       | Custom API origin (default: `https://www.faster-fixes.com`)      |\n| `color`      | `string`              | No       | Widget accent color — any CSS color value (default: `#02527E`)   |\n| `position`   | `WidgetPosition`      | No       | Floating button position (default: `bottom-right`)               |\n| `classNames` | `Partial<ClassNames>` | No       | CSS class overrides for widget elements                          |\n| `labels`     | `Partial<Labels>`     | No       | Custom UI text labels                                            |\n\n### `useFeedback` hook\n\nControl the widget programmatically:\n\n```tsx\nimport { useFeedback } from \"@27works/faster-fixes-react\";\n\nfunction MyComponent() {\n  const {\n    show,\n    hide,\n    isVisible,\n    startAnnotation,\n    feedbackItems,\n    togglePins,\n    showPins,\n  } = useFeedback();\n\n  return (\n    <button onClick={() => (isVisible ? hide() : show())}>\n      Toggle feedback widget\n    </button>\n  );\n}\n```\n\n| Property          | Type             | Description                           |\n| ----------------- | ---------------- | ------------------------------------- |\n| `show`            | `() => void`     | Show the widget                       |\n| `hide`            | `() => void`     | Hide the widget and reset mode        |\n| `isVisible`       | `boolean`        | Whether the widget is currently shown |\n| `startAnnotation` | `() => void`     | Enter annotation mode directly        |\n| `feedbackItems`   | `FeedbackItem[]` | All feedback items for the project    |\n| `togglePins`      | `() => void`     | Toggle pin visibility on the page     |\n| `showPins`        | `boolean`        | Whether pins are currently visible    |\n\n## Features\n\n- Visual element annotation with click-to-select\n- Automatic screenshot capture\n- Edit and delete existing feedback\n- Resolved feedback filtering\n- Dark mode UI\n- Animated toolbar with list and visibility toggles\n- Feedback pins positioned on annotated elements\n- Element highlighting on hover and active feedback\n- Cross-page feedback list with navigation\n- Configurable position (corners, middle-left, middle-right)\n- Configurable accent color\n- Custom CSS class overrides\n- Custom text labels\n- SPA navigation support (URL change detection)\n- Full keyboard support (Escape to cancel)\n\n## Browser support\n\nWorks in all modern browsers (Chrome, Firefox, Safari, Edge).\n\n## Known limitations\n\n### Fixed-position elements are not captured correctly on scrolled pages\n\nScreenshot capture renders the full page and crops to the current viewport so the\nscreenshot reflects what the reviewer is actually looking at, not the top of the page.\nThis relies on `modern-screenshot`'s full-page render, which does not keep\n`position: fixed` elements (e.g. sticky headers/footers) pinned to the viewport during\nthat render — they end up misplaced or missing from the cropped result once the page is\nscrolled. On an unscrolled page this doesn't manifest, since the viewport crop and the\ndocument top coincide.\n\nThis is a known upstream limitation of `modern-screenshot`, not something introduced by\nthis fork's fix. We chose not to work around it with a `transform: translate()`-based\ncapture, since that approach fixes fixed-element placement at the cost of reintroducing\nincorrect scroll rendering for the rest of the page — a worse trade-off for our use case.\nIf this is fixed upstream in `modern-screenshot` or in\n[`manucoffin/faster-fixes`](https://github.com/manucoffin/faster-fixes), this fork can be\nretired in favor of the canonical package.\n\n## License\n\n[MIT](./LICENSE). This package is a fork of\n[`@fasterfixes/react`](https://github.com/manucoffin/faster-fixes) — see [NOTICE](./NOTICE)\nfor details on what changed.\n","readmeFilename":"README.md"}