diff --git a/posthog-react-native/CHANGELOG.md b/posthog-react-native/CHANGELOG.md index da782398..a9240314 100644 --- a/posthog-react-native/CHANGELOG.md +++ b/posthog-react-native/CHANGELOG.md @@ -1,3 +1,7 @@ +# Next + +1. Added new `const [flag, payload] = useFeatureFlagWithPayload('my-flag-name')` hook that returns the flag result and it's payload if it has one. + # 2.7.1 - 2023-05-25 1. The `$screen_name` property will be registered for all events whenever `screen` is called diff --git a/posthog-react-native/src/hooks/useFeatureFlag.ts b/posthog-react-native/src/hooks/useFeatureFlag.ts index 589cef8c..8962203e 100644 --- a/posthog-react-native/src/hooks/useFeatureFlag.ts +++ b/posthog-react-native/src/hooks/useFeatureFlag.ts @@ -1,5 +1,6 @@ import { useEffect, useState } from 'react' import { usePostHog } from './usePostHog' +import { JsonType } from 'posthog-core/src' export function useFeatureFlag(flag: string): string | boolean | undefined { const posthog = usePostHog() @@ -18,3 +19,24 @@ export function useFeatureFlag(flag: string): string | boolean | undefined { return featureFlag } + +export type FeatureFlagWithPayload = [boolean | string | undefined, JsonType | undefined] + +export function useFeatureFlagWithPayload(flag: string): FeatureFlagWithPayload { + const posthog = usePostHog() + + const [featureFlag, setFeatureFlag] = useState([undefined, undefined]) + + useEffect(() => { + if (!posthog) { + return + } + + setFeatureFlag([posthog.getFeatureFlag(flag), posthog.getFeatureFlagPayload(flag)]) + return posthog.onFeatureFlags(() => { + setFeatureFlag([posthog.getFeatureFlag(flag), posthog.getFeatureFlagPayload(flag)]) + }) + }, [posthog, flag]) + + return featureFlag +}