Expert guidance for integrating FeatBit React Client SDK in React and Next.js applications. Use when users work with React, need React hooks, or ask about React/Next.js feature flag integration.
View on GitHubFebruary 3, 2026
Select agents to install to:
npx add-skill https://github.com/featbit/featbit-skills/blob/main/skills/featbit-react-client-sdk/SKILL.md -a claude-code --skill featbit-react-client-sdkInstallation paths:
.claude/skills/featbit-react-client-sdk/# FeatBit React Client SDK Expert guidance for integrating the FeatBit React Client SDK in React and Next.js applications. This is a browser-only SDK built on top of FeatBit's JavaScript SDK, optimized for React 16.3.0+. ## Activates When - The user asks about FeatBit React SDK setup, initialization, or usage. - The user mentions `asyncWithFbProvider`, `withFbProvider`, `useFlags`, `useFbClient`, or `withFbConsumer`. - The user needs client-side feature flag integration in React or Next.js applications. - The user is working with React components (class or function) and needs feature flag evaluation. ## Overview This is a **client-side SDK** for browser environments only. It wraps the JavaScript SDK to provide React-specific features like Context API integration, custom hooks, and automatic flag subscription. **Not suitable for React Native** (use the dedicated React Native SDK instead). **Key capabilities:** - Initialize via `asyncWithFbProvider` (async, pre-rendered) or `withFbProvider` (render-first) - Access flags via `useFlags` hook or `withFbConsumer` HOC - Automatic subscription to flag changes (no manual opt-in needed) - Support for both class and function components - Optional camelCase flag keys - Bootstrap with default flag values **Next.js compatibility:** Client-side only. Use `@featbit/node-server-sdk` for server-side rendering. ## Core Knowledge Areas ### 1. Prerequisites - Install: `npm install @featbit/react-client-sdk` - Required values: `sdkKey` (environment secret), `streamingUrl`, `eventsUrl` - Official FAQ: environment secret + SDK URLs ### 2. Initialization Methods Two approaches with different timing: - **asyncWithFbProvider**: Async initialization before render (React 16.8.0+, Hooks required). Ensures flags ready at app start, may delay initial render up to 100ms. - **withFbProvider**: Wraps root component, renders first, processes flag updates after. No Hooks requirement. Both methods use React Context API and accept a `Provide