{"_id":"@astrapi69/feature-strategy-react","_rev":"3-3c158d70d0aaec89e25c8747026382c8","name":"@astrapi69/feature-strategy-react","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@astrapi69/feature-strategy-react","version":"0.1.0","keywords":["feature-flags","feature-gating","authorization","react","hooks"],"author":{"name":"Asterios Raptis"},"license":"MIT","_id":"@astrapi69/feature-strategy-react@0.1.0","maintainers":[{"name":"astrapi69","email":"asterios.raptis@gmx.net"}],"homepage":"https://github.com/astrapi69/feature-strategy#readme","bugs":{"url":"https://github.com/astrapi69/feature-strategy/issues"},"dist":{"shasum":"fb566f934e8446266f39c7a8866965341ea98a68","tarball":"https://registry.npmjs.org/@astrapi69/feature-strategy-react/-/feature-strategy-react-0.1.0.tgz","fileCount":9,"integrity":"sha512-j6Bq9d0ozKEEBVnhjsXjiOC771mM6NJkNKoT4M2DxYTJaCLwFx1tNTsHv0Tmzy4wi7MHQnsC5EF5g2IarJS3oQ==","signatures":[{"sig":"MEUCIDy04P7M+aZrW1uFeuP5gYDrrC6h5x3yedI7pKY1Pc5bAiEA+7cpfjJITvrgWxeU3d9JAhfUysli9tjCVM5Fhvv2yPs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30300},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}}},"gitHead":"8aa067cf421a1fa0f659d694c7b9058b348c77a2","scripts":{"test":"vitest run","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"astrapi69","email":"asterios.raptis@gmx.net"},"repository":{"url":"git+https://github.com/astrapi69/feature-strategy.git","type":"git","directory":"packages/react"},"_npmVersion":"11.16.0","description":"React adapter for @astrapi69/feature-strategy: provider, useFeature hook and Feature component","directories":{},"sideEffects":false,"_nodeVersion":"24.15.0","dependencies":{"@astrapi69/feature-strategy":"^0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^26.1.0","react":"^18.3.1","react-dom":"^18.3.1","@types/react":"^18.3.23","@types/react-dom":"^18.3.7","@testing-library/react":"^16.3.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/feature-strategy-react_0.1.0_1781176993885_0.539749356783445","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@astrapi69/feature-strategy-react","version":"0.1.1","keywords":["feature-flags","feature-gating","authorization","react","hooks"],"author":{"name":"Asterios Raptis"},"license":"MIT","_id":"@astrapi69/feature-strategy-react@0.1.1","maintainers":[{"name":"astrapi69","email":"asterios.raptis@gmx.net"}],"homepage":"https://github.com/astrapi69/feature-strategy#readme","bugs":{"url":"https://github.com/astrapi69/feature-strategy/issues"},"dist":{"shasum":"835f68113748e8bc90f935672665171c8aac6471","tarball":"https://registry.npmjs.org/@astrapi69/feature-strategy-react/-/feature-strategy-react-0.1.1.tgz","fileCount":9,"integrity":"sha512-OjB9LTiXLC3vDTSBtBkKLo1eIEcpKq5sAa1u1IxKDv8IXjYlLU33vRABosodRWZUjqJsbDlmJG2uZeRrfCHEtQ==","signatures":[{"sig":"MEUCIQCNX4XpwL/aAmPMMWHJsP6uJEx9n2R/qkA5iYkGlAfzXgIgRdhKxIVY3/Fyr/CERZruqcYbCksokSwhjuylNaUkxBw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31996},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}}},"gitHead":"e6f48d41c662fa0dcbbd5dcc353ae3203f6a6630","scripts":{"test":"vitest run","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"astrapi69","email":"asterios.raptis@gmx.net"},"repository":{"url":"git+https://github.com/astrapi69/feature-strategy.git","type":"git","directory":"packages/react"},"_npmVersion":"11.16.0","description":"React adapter for @astrapi69/feature-strategy: provider, useFeature hook and Feature component","directories":{},"sideEffects":false,"_nodeVersion":"24.15.0","dependencies":{"@astrapi69/feature-strategy":"^0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^26.1.0","react":"^18.3.1","react-dom":"^18.3.1","@types/react":"^18.3.23","@types/react-dom":"^18.3.7","@testing-library/react":"^16.3.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/feature-strategy-react_0.1.1_1781186139631_0.11689626682557797","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@astrapi69/feature-strategy-react","version":"0.1.2","description":"React adapter for @astrapi69/feature-strategy: provider, useFeature hook and Feature component","keywords":["feature-flags","feature-gating","authorization","react","hooks"],"license":"MIT","author":{"name":"Asterios Raptis"},"repository":{"type":"git","url":"git+https://github.com/astrapi69/feature-strategy.git","directory":"packages/react"},"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}}},"sideEffects":false,"scripts":{"build":"tsup","test":"vitest run","typecheck":"tsc --noEmit"},"dependencies":{"@astrapi69/feature-strategy":"^0.1.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0"},"devDependencies":{"@testing-library/react":"^16.3.0","@types/react":"^18.3.23","@types/react-dom":"^18.3.7","jsdom":"^26.1.0","react":"^18.3.1","react-dom":"^18.3.1"},"publishConfig":{"access":"public"},"gitHead":"2cbcf78166b8f00fdb88c94c0c35ab881b1826c3","_id":"@astrapi69/feature-strategy-react@0.1.2","bugs":{"url":"https://github.com/astrapi69/feature-strategy/issues"},"homepage":"https://github.com/astrapi69/feature-strategy#readme","_nodeVersion":"24.15.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-bkxZf95CY9Mb3/uH6szn8j9nuAU551RAUpjBLDjXfFC3cXDs+9TsfvZBBxeJP8LXPTzWL060EJvmtTdYKnV4Ww==","shasum":"0f7b9e876984f29659ddbb77197d6aeeb4e4758f","tarball":"https://registry.npmjs.org/@astrapi69/feature-strategy-react/-/feature-strategy-react-0.1.2.tgz","fileCount":9,"unpackedSize":32084,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC5kxnzYKz7lQIYYSoQNZ8zCePwi3AmvM9wB6xcI5cJ1wIhAP9j01VX946C8pIS/D2UveogHXz4ClHxUxkN68Sudymj"}]},"_npmUser":{"name":"astrapi69","email":"asterios.raptis@gmx.net"},"directories":{},"maintainers":[{"name":"astrapi69","email":"asterios.raptis@gmx.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/feature-strategy-react_0.1.2_1781258206483_0.9632388212803289"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-11T11:23:13.797Z","modified":"2026-06-12T09:56:46.722Z","0.1.0":"2026-06-11T11:23:14.108Z","0.1.1":"2026-06-11T13:55:39.809Z","0.1.2":"2026-06-12T09:56:46.612Z"},"bugs":{"url":"https://github.com/astrapi69/feature-strategy/issues"},"author":{"name":"Asterios Raptis"},"license":"MIT","homepage":"https://github.com/astrapi69/feature-strategy#readme","keywords":["feature-flags","feature-gating","authorization","react","hooks"],"repository":{"type":"git","url":"git+https://github.com/astrapi69/feature-strategy.git","directory":"packages/react"},"description":"React adapter for @astrapi69/feature-strategy: provider, useFeature hook and Feature component","maintainers":[{"name":"astrapi69","email":"asterios.raptis@gmx.net"}],"readme":"# @astrapi69/feature-strategy-react\n\nReact adapter for [`@astrapi69/feature-strategy`](https://www.npmjs.com/package/@astrapi69/feature-strategy).\nSupports React 18 and 19.\n\n## Install\n\n```bash\nnpm install @astrapi69/feature-strategy @astrapi69/feature-strategy-react\n```\n\n## Usage\n\n```tsx\nimport { useMemo } from 'react';\nimport { FeatureRegistry, ConditionalFeatureStrategy } from '@astrapi69/feature-strategy';\nimport { Feature, FeatureProvider, useFeature } from '@astrapi69/feature-strategy-react';\n\nconst registry = new FeatureRegistry<{ mode: string }>();\nregistry.registerAll([\n    { id: 'export', defaultState: 'active' },\n    { id: 'git-sync', defaultState: 'active' }\n]);\nregistry.setStrategy(\n    new ConditionalFeatureStrategy({\n        'git-sync': {\n            evaluate: (ctx) => (ctx?.mode === 'offline' ? 'hidden' : 'active'),\n            reason: 'Requires the git binary'\n        }\n    })\n);\n\nfunction App({ mode }: { mode: string }) {\n    const featureContext = useMemo(() => ({ mode }), [mode]);\n    return (\n        <FeatureProvider registry={registry} context={featureContext}>\n            <Toolbar />\n        </FeatureProvider>\n    );\n}\n\nfunction Toolbar() {\n    const exportFeature = useFeature('export');\n    return (\n        <div>\n            <button disabled={!exportFeature.isActive}>Export</button>\n            <Feature id=\"git-sync\" whenDisabled={(reason) => <span>{reason}</span>}>\n                <button>Sync</button>\n            </Feature>\n        </div>\n    );\n}\n```\n\n`useFeature(id)` returns `{ state, isActive, isDisabled, isHidden, reason }`.\nThe `<Feature>` component renders its children when active, the `whenDisabled`\nand `whenHidden` fallbacks otherwise, or hands full control to a render\nfunction child that receives the complete handle.\n\n## Memoize the context object\n\nThe provider re-renders all consumers whenever the `context` prop changes\nidentity. An inline object literal creates a new identity on every parent\nrender and turns every `useFeature` consumer into a re-render, which makes\nthe app feel slow for no visible reason:\n\n```tsx\n// Wrong: new object identity on every render\n<FeatureProvider registry={registry} context={{ mode, hasKey }}>\n\n// Right: stable identity, changes only when the values change\nconst featureContext = useMemo(() => ({ mode, hasKey }), [mode, hasKey]);\n<FeatureProvider registry={registry} context={featureContext}>\n```\n\nThe same rule as for any React context value. When the context values do\nchange, that is exactly the mechanism that re-evaluates all features, so\nvalues like an API key status must come from reactive state, not from a\none-time read at mount.\n\n## Evaluation model and cost\n\nEvaluation is lazy per consumer: `useFeature` evaluates state and reason on\nrender of the consuming component, memoized over registry, context, and id.\nThere is no eager evaluation in the provider, no subscriptions, no async\nwork. With static maps or cheap conditions the per-render cost is a map\nlookup plus a condition check. Keep conditions synchronous and pure (see\nthe core package README). Bundle impact is roughly two to three kilobytes\ngzipped for core and adapter combined.\n\nThe registry itself is treated as immutable configuration: calling\n`setStrategy` after mount does not notify React. Drive runtime changes\nthrough the `context` prop instead.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}