{"_id":"@access-lens/react","name":"@access-lens/react","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@access-lens/react","version":"0.1.0","description":"React adapter for Access Lens — typed Provider, AccessGate, and hooks bound to your defineAccessLens config.","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"sideEffects":false,"keywords":["react","access-control","rbac","permissions","feature-flags","entitlements","observability","saas","authorization","typescript","headless"],"author":{"name":"Shahar Amir","email":"shahramir3@gmail.com"},"license":"MIT","homepage":"https://github.com/Shaharamir/access-lens#readme","repository":{"type":"git","url":"git+https://github.com/Shaharamir/access-lens.git","directory":"packages/react"},"bugs":{"url":"https://github.com/Shaharamir/access-lens/issues"},"engines":{"node":">=18"},"publishConfig":{"access":"public","provenance":false},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@access-lens/core":"^0.1.0"},"dependencies":{"@access-lens/core":"^0.1.0"},"devDependencies":{"@types/react":"^18.3.12","react":"^18.3.1","typescript":"^5.6.3"},"scripts":{"build":"tsup","typecheck":"tsc -p tsconfig.json --noEmit","clean":"rm -rf dist"},"_id":"@access-lens/react@0.1.0","_integrity":"sha512-9GVOHixPnf59xCMp+2VBXfzZGzH2er822q95CKGDvMu57Y6T5y6epSY9pVkxbEhB24E1EZ7zm7bbA50jlJA1Ug==","_resolved":"C:\\Users\\shahar-a\\AppData\\Local\\Temp\\0d6bc284875de365e215ad80a8c904ac\\access-lens-react-0.1.0.tgz","_from":"file:access-lens-react-0.1.0.tgz","_nodeVersion":"22.15.0","_npmVersion":"11.4.2","dist":{"integrity":"sha512-9GVOHixPnf59xCMp+2VBXfzZGzH2er822q95CKGDvMu57Y6T5y6epSY9pVkxbEhB24E1EZ7zm7bbA50jlJA1Ug==","shasum":"3d237f4d55a29e142af5e4cfb951d749cc982890","tarball":"https://registry.npmjs.org/@access-lens/react/-/react-0.1.0.tgz","fileCount":9,"unpackedSize":56784,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDOKgBZh+sj7E1Kn/ioeTyWqkDRscXhz08AbGjqZyQfiwIgVsV6FHknqYZ8E0Tje2lFVyi9jcj6iblcZJN4agNsRHo="}]},"_npmUser":{"name":"shahar.amir","email":"shahramir3@gmail.com"},"directories":{},"maintainers":[{"name":"shahar.amir","email":"shahramir3@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_0.1.0_1781408100713_0.36537608942944755"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-14T03:35:00.564Z","0.1.0":"2026-06-14T03:35:00.874Z","modified":"2026-06-14T03:35:01.115Z"},"maintainers":[{"name":"shahar.amir","email":"shahramir3@gmail.com"}],"description":"React adapter for Access Lens — typed Provider, AccessGate, and hooks bound to your defineAccessLens config.","homepage":"https://github.com/Shaharamir/access-lens#readme","keywords":["react","access-control","rbac","permissions","feature-flags","entitlements","observability","saas","authorization","typescript","headless"],"repository":{"type":"git","url":"git+https://github.com/Shaharamir/access-lens.git","directory":"packages/react"},"author":{"name":"Shahar Amir","email":"shahramir3@gmail.com"},"bugs":{"url":"https://github.com/Shaharamir/access-lens/issues"},"license":"MIT","readme":"# @access-lens/react\n\nReact adapter for Access Lens.\n\n## Install\n\n```bash\npnpm add @access-lens/react @access-lens/core\n```\n\n## Quick start\n\n```tsx\nimport {\n  AccessLensProvider,\n  AccessGate,\n  permission,\n  featureFlag,\n  entitlement,\n} from \"@access-lens/react\";\n\nfunction App() {\n  return (\n    <AccessLensProvider defaultDebugMode={false}>\n      <Sidebar />\n    </AccessLensProvider>\n  );\n}\n\nfunction Sidebar() {\n  return (\n    <AccessGate\n      id=\"sidebar.billing\"\n      label=\"Billing\"\n      type=\"sidebar_item\"\n      reasons={[\n        permission(\"billing.read\", user.permissions.includes(\"billing.read\")),\n        featureFlag(\"billing_v2\", flags.billing_v2),\n        entitlement(\"billing\", tenant.entitlements.billing),\n      ]}\n    >\n      <a href=\"/billing\">Billing</a>\n    </AccessGate>\n  );\n}\n```\n\n## Behavior\n\n- `allowed` → renders `children` unchanged.\n- `denied` and `debugMode = false` → renders `fallback` (or nothing).\n- `denied` and `debugMode = true` and `ghostInDebug = true` → renders `children`\n  wrapped in a dashed/ghost style with a tooltip listing the failed reasons and\n  a `data-access-lens-id` attribute for the overlay.\n\n## Hooks\n\n- `useAccessLens()` — returns `{ client, debugMode, setDebugMode }`.\n- `useAccessGate(input)` — returns `{ node, allowed, denied, unknown }` and\n  registers the node into the client.\n- `useAccessLensSnapshot()` — subscribes to the live snapshot via React's\n  `useSyncExternalStore`.\n\nThe reason helpers and the core types are re-exported here for convenience so a React app rarely needs to import `@access-lens/core` directly.\n","readmeFilename":"README.md","_rev":"1-a46b68a91002f659ae7868c220413f33"}