{"_id":"@abhishek270104/react-feature-toggle","name":"@abhishek270104/react-feature-toggle","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@abhishek270104/react-feature-toggle","version":"1.0.0","description":"A lightweight, scalable, and type-safe feature flag management system for React.","main":"dist/index.cjs","module":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"repository":{"type":"git","url":"git+https://github.com/abhishek270104/react-feature-toggle.git"},"bugs":{"url":"https://github.com/abhishek270104/react-feature-toggle/issues"},"scripts":{"build":"tsup","dev":"tsup --watch","test":"vitest","lint":"eslint src --ext .ts,.tsx","type-check":"tsc --noEmit"},"keywords":["react","feature-flags","feature-toggle","typescript","frontend","toggle"],"author":"","license":"MIT","peerDependencies":{"react":">=18.0.0"},"devDependencies":{"@testing-library/jest-dom":"^6.0.0","@testing-library/react":"^14.0.0","@types/node":"^25.3.3","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","jsdom":"^22.0.0","react":"^18.0.0","react-dom":"^18.0.0","tsup":"^8.0.0","typescript":"^5.0.0","vitest":"^1.0.0"},"_id":"@abhishek270104/react-feature-toggle@1.0.0","homepage":"https://github.com/abhishek270104/react-feature-toggle#readme","_nodeVersion":"24.7.0","_npmVersion":"11.5.1","dist":{"integrity":"sha512-J6Kh/iIFMw1tmmgMsvZY3VNfKTxf0ZCrNHnvFZDXH36y38YwwRFc+7CfciS0M6eAvpRcsjLMbO8aztAmNhfF4g==","shasum":"386c31807c3c7a8993011f2705fdc044baa0401a","tarball":"https://registry.npmjs.org/@abhishek270104/react-feature-toggle/-/react-feature-toggle-1.0.0.tgz","fileCount":9,"unpackedSize":51315,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIA0MalRONhWx9nPRxMZCwEhX97w4mY05t5PClkzTw47WAiAnbIXFjR8Q1ukz8FarEL0L3ZmgV3XbcAbtgcLAnbglNQ=="}]},"_npmUser":{"name":"abhishek270104","email":"abhishek010427@gmail.com"},"directories":{},"maintainers":[{"name":"abhishek270104","email":"abhishek010427@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-feature-toggle_1.0.0_1772389308381_0.026845388206497622"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-01T18:21:48.285Z","1.0.0":"2026-03-01T18:21:48.522Z","modified":"2026-03-01T18:21:48.790Z"},"maintainers":[{"name":"abhishek270104","email":"abhishek010427@gmail.com"}],"description":"A lightweight, scalable, and type-safe feature flag management system for React.","homepage":"https://github.com/abhishek270104/react-feature-toggle#readme","keywords":["react","feature-flags","feature-toggle","typescript","frontend","toggle"],"repository":{"type":"git","url":"git+https://github.com/abhishek270104/react-feature-toggle.git"},"bugs":{"url":"https://github.com/abhishek270104/react-feature-toggle/issues"},"license":"MIT","readme":"# react-feature-toggle 🚀\n\nA lightweight, production-grade feature flag management system for React. Built with TypeScript, performance, and developer experience in mind.\n\n[![NPM Version](https://img.shields.io/npm/v/@abhishek270104/react-feature-toggle.svg)](https://www.npmjs.com/package/@abhishek270104/react-feature-toggle)\n[![License](https://img.shields.io/npm/l/@abhishek270104/react-feature-toggle.svg)](https://github.com/abhishek270104/react-feature-toggle/blob/main/LICENSE)\n\n## ✨ Features\n\n- ⚡ **Minimal Re-renders**: Optimized evaluation engine.\n- 🛠️ **Type-Safe**: Strongly typed flags and usage.\n- 🌐 **Remote Config**: Fetch flags from any API with fallback support.\n- 🚀 **Advanced Targeting**: Percentage rollouts and role-based access.\n- 💾 **Caching**: LocalStorage persistence for instant loads.\n- 🌑 **SSR Support**: Compatible with Next.js and server-side rendering.\n- 🔍 **Debug Mode**: Built-in logging for development.\n\n## 📦 Installation\n\n```bash\nnpm install @abhishek270104/react-feature-toggle\n```\n\n## 🚀 Quick Start\n\n### 1. Define your flags\n\n```typescript\nconst initialFlags = {\n  newDashboard: true,\n  betaFeature: {\n    enabled: true,\n    percentage: 50,\n    roles: ['beta-tester']\n  }\n};\n```\n\n### 2. Setup Provider\n\n```tsx\nimport { FeatureProvider } from '@abhishek270104/react-feature-toggle';\n\nfunction App() {\n  return (\n    <FeatureProvider config={initialFlags} context={{ userId: '123', roles: ['admin'] }}>\n      <MyContent />\n    </FeatureProvider>\n  );\n}\n```\n\n### 3. Use Flags\n\n**Component Wrapper:**\n\n```tsx\nimport { Feature } from '@abhishek270104/react-feature-toggle';\n\n<Feature name=\"newDashboard\" fallback={<OldDashboard />}>\n  <NewDashboard />\n</Feature>\n```\n\n**Hook:**\n\n```tsx\nimport { useFeature } from '@abhishek270104/react-feature-toggle';\n\nfunction Dashboard() {\n  const isEnabled = useFeature('newDashboard');\n  return isEnabled ? <New /> : <Old />;\n}\n```\n\n## 🌍 Remote Configuration\n\n```tsx\n<FeatureProvider \n  remoteConfigUrl=\"https://api.myapp.com/flags\"\n  fallbackConfig={localFlags}\n>\n  <App />\n</FeatureProvider>\n```\n\n## 🛠️ API Reference\n\n### `FeatureProvider`\n- `config`: Initial/Static flags.\n- `remoteConfigUrl`: URL to fetch remote flags.\n- `fallbackConfig`: Backup config if remote fetch fails.\n- `context`: User context for evaluation (`userId`, `roles`, etc.).\n- `environment`: Override environment detection (`development` | `production`).\n\n### `useFeature(name)`\nReturns `boolean`.\n\n### `Feature`\n- `name`: Flag name.\n- `fallback`: Optional React node to show if disabled.\n\n## 📄 License\n\nMIT © [Your Name]\n","readmeFilename":"README.md","_rev":"1-74f117117bfa3cdf5f17823b67dda8b3"}