@flipfeatureflag/react 0.1.8 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flipfeatureflag/react",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "flipFeatureFlag React SDK",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -20,7 +20,7 @@
     "react": ">=17"
   },
   "dependencies": {
-    "@flipfeatureflag/core": "0.1.7",
-    "@flipfeatureflag/js": "0.1.8"
+    "@flipfeatureflag/core": "0.1.8",
+    "@flipfeatureflag/js": "0.1.9"
   }
 }

package/src/index.tsx

@@ -109,19 +109,37 @@ export function useFlagsStatus(): FlagsStatus {
   return React.useContext(FlipFlagStatusContext);
 }
 
-export function useFlag(flagKey: string, defaultValue = false): boolean {
+export interface FlagValueResult<T = SdkFlagEvaluation["value"]> {
+  value: T;
+  enabled: boolean;
+}
+
+function toFlagResult(evaluation: SdkFlagEvaluation, known: boolean): FlagValueResult {
+  const enabled = known && evaluation.reason !== "disabled";
+  return {
+    value: evaluation.value,
+    enabled,
+  };
+}
+
+export function useFlag(
+  flagKey: string,
+  defaultValue: SdkFlagEvaluation["value"] = false,
+): FlagValueResult {
   const client = useFlipFlagClient();
-  const [value, setValue] = useState(() => client.isEnabled(flagKey, defaultValue));
+  const [result, setResult] = useState(() =>
+    toFlagResult(client.getVariant(flagKey, defaultValue), client.hasFlag(flagKey)),
+  );
 
   useEffect(() => {
     const update = () => {
-      setValue(client.isEnabled(flagKey, defaultValue));
+      setResult(toFlagResult(client.getVariant(flagKey, defaultValue), client.hasFlag(flagKey)));
     };
     client.on("update", update);
     return () => client.off("update", update);
   }, [client, flagKey, defaultValue]);
 
-  return value;
+  return result;
 }
 
 export function useVariant(flagKey: string, defaultValue: SdkFlagEvaluation["value"] = false): SdkFlagEvaluation {