47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import { useFlagsStatus, useUnleashClient, useVariant } from "@unleash/proxy-client-react";
|
|
import { useEffect, useMemo } from "react";
|
|
|
|
interface IUseUnleashProps {
|
|
flag: string;
|
|
}
|
|
|
|
export const useUnleash = ({
|
|
flag
|
|
}: IUseUnleashProps) => {
|
|
const { flagsReady } = useFlagsStatus();
|
|
const unleashClient = useUnleashClient();
|
|
const abVariant = useVariant(flag);
|
|
// const isEnabled = useFlag(flag);
|
|
|
|
const isReady = useMemo(() => {
|
|
return flagsReady ?? true;
|
|
}, [flagsReady]);
|
|
|
|
const variant = useMemo(() => {
|
|
return abVariant?.payload?.value;
|
|
}, [abVariant]);
|
|
|
|
useEffect(() => {
|
|
unleashClient.on("impression", (impressionEvent: any) => {
|
|
if ("enabled" in impressionEvent && impressionEvent.enabled) {
|
|
window.gtag?.("event", "experiment_impression", {
|
|
app_name: impressionEvent.context.appName,
|
|
feature: impressionEvent.featureName,
|
|
treatment: impressionEvent.variant, // in case we use a variant for the control treatment
|
|
});
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
unleashClient.off("impression");
|
|
}
|
|
}, [unleashClient]);
|
|
|
|
return useMemo(() => ({
|
|
isReady,
|
|
variant
|
|
}), [
|
|
isReady,
|
|
variant
|
|
])
|
|
}; |