useFeatureFlag

The useFeatureFlag hook is a specialized wrapper around useFetch that provides detailed information about a feature flag, including its current value and any associated configuration payload. It allows for dynamic content configuration and A/B testing beyond simple boolean toggles.

import { useFeatureFlag } from '@archibald/personalization';

const { data: flag, isLoading } = useFeatureFlag(id, options);

Parameters

Name	Type	Required	Description
id	string	✔️	The unique identifier of the feature flag.
options	FeatureFlagCustom & FetchMinOptions		Options for the request and data fetching.

id

The identifier used to look up the feature flag.

options

A combination of personalization-specific options and standard useFetch options. See FetchOptions for more information.

Return value

• Type: FetchResult<FeatureFlag>

Property	Type	Description
data	FeatureFlag | null	The feature flag data, including value and payload.
isLoading	boolean	True if the flag data is being fetched.
isDone	boolean	True if the fetch is complete.

Example

import { useFeatureFlag } from '@archibald/personalization';

function PromoBanner() {
    const { data: flag, isLoading } = useFeatureFlag('summer-promo-banner');

    if (isLoading || !flag || flag.value === 'off') return null;

    // The payload can contain dynamic data like image URLs and text
    const { imageUrl, message, buttonColor } = flag.payload;

    return (
        <div style={{ backgroundColor: buttonColor }}>
            <img src={imageUrl} alt="Promotion" />
            <p>{message}</p>
            <button>Shop Now</button>
        </div>
    );
}