diff --git a/packages/openfeature-browser-provider/example/app/featureManagement.ts b/packages/openfeature-browser-provider/example/app/featureManagement.ts index 2cb569a2..41f67acd 100644 --- a/packages/openfeature-browser-provider/example/app/featureManagement.ts +++ b/packages/openfeature-browser-provider/example/app/featureManagement.ts @@ -18,7 +18,17 @@ export async function initOpenFeature() { console.error("No publishable key set for Bucket"); return; } - bucketProvider = new BucketBrowserSDKProvider({ publishableKey }); + bucketProvider = new BucketBrowserSDKProvider({ + publishableKey, + fallbackFeatures: { + huddle: { + key: "zoom", + payload: { + joinUrl: "https://zoom.us/join", + }, + }, + }, + }); return OpenFeature.setProviderAndWait(bucketProvider); } diff --git a/packages/openfeature-browser-provider/example/components/HuddleFeature.tsx b/packages/openfeature-browser-provider/example/components/HuddleFeature.tsx index bfcedae2..55d03c91 100644 --- a/packages/openfeature-browser-provider/example/components/HuddleFeature.tsx +++ b/packages/openfeature-browser-provider/example/components/HuddleFeature.tsx @@ -1,19 +1,37 @@ "use client"; import React from "react"; -import { useBooleanFlagValue } from "@openfeature/react-sdk"; +import { + useBooleanFlagValue, + useObjectFlagDetails, +} from "@openfeature/react-sdk"; import { track } from "@/app/featureManagement"; const featureKey = "huddle"; export const HuddleFeature = () => { const isEnabled = useBooleanFlagValue(featureKey, false); + const { variant: provider, value: config } = useObjectFlagDetails( + featureKey, + { + joinUrl: "https://zoom.us/join", + }, + ); + return (

Huddle feature enabled:

         {JSON.stringify(isEnabled)}
       
+

+ Huddle using {provider}: +

+
+        
+          Join the huddle at {config.joinUrl}
+        
+