49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import React, { createContext, useContext, useMemo, ReactNode } from 'react';
|
|
import { FeatureFlagContextType, MockFeatureFlagService, mockFeatureFlags } from './FeatureFlagService';
|
|
|
|
const FeatureFlagContext = createContext<FeatureFlagContextType>(mockFeatureFlags);
|
|
|
|
interface FeatureFlagProviderProps {
|
|
children: ReactNode;
|
|
flags?: string[];
|
|
}
|
|
|
|
/**
|
|
* Provider for feature flags on the client side
|
|
* Can be initialized with specific flags or defaults to mock implementation
|
|
*/
|
|
export function FeatureFlagProvider({ children, flags }: FeatureFlagProviderProps) {
|
|
const service = useMemo(() => {
|
|
if (flags) {
|
|
return new MockFeatureFlagService(flags);
|
|
}
|
|
return mockFeatureFlags;
|
|
}, [flags]);
|
|
|
|
return (
|
|
<FeatureFlagContext.Provider value={service}>
|
|
{children}
|
|
</FeatureFlagContext.Provider>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Hook to access feature flags in client components
|
|
*/
|
|
export function useFeatureFlags(): FeatureFlagContextType {
|
|
const context = useContext(FeatureFlagContext);
|
|
if (!context) {
|
|
throw new Error('useFeatureFlags must be used within a FeatureFlagProvider');
|
|
}
|
|
return context;
|
|
}
|
|
|
|
/**
|
|
* Hook to check if a specific feature is enabled
|
|
*/
|
|
export function useFeatureFlag(flag: string): boolean {
|
|
const { isEnabled } = useFeatureFlags();
|
|
return isEnabled(flag);
|
|
} |