Feature flags for React applications with real-time updates via SSE
npm install @rollgate/react
Wrap your app with RollgateProvider. Use mode: 'sse' for real-time updates.
// App.tsx
import { RollgateProvider } from '@rollgate/react';
function App() {
return (
<RollgateProvider
apiKey="rg_client_xxxxx"
apiUrl="https://api.rollgate.io"
mode="sse" // Real-time updates via Server-Sent Events
>
<YourApp />
</RollgateProvider>
);
}
Use the useFlag hook to check if a feature is enabled.
// MyComponent.tsx
import { useFlag } from '@rollgate/react';
function MyComponent() {
const darkMode = useFlag('dark-mode');
return (
<div className={darkMode ? 'dark' : 'light'}>
Dark mode is {darkMode ? 'ON' : 'OFF'}
</div>
);
}Identify users to enable percentage rollouts and targeting rules.
import { useRollgate } from '@rollgate/react';
function UserProfile({ user }) {
const { identify } = useRollgate();
useEffect(() => {
identify({
userId: user.id,
attributes: {
plan: user.plan, // 'free' | 'pro' | 'enterprise'
country: user.country // For geo-targeting
}
});
}, [user]);
return <div>...</div>;
}