useFeatureFlagActive

The useFeatureFlagActive hook is a specialized wrapper around useFetch used to check if a specific feature flag is currently enabled for the user. It is ideal for simple "on/off" toggles and handles the evaluation logic through the personalization provider.

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

const { data: isActive, isLoading } = useFeatureFlagActive(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 in the personalization provider (e.g., GrowthBook).

options

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

Return value

• Type: FetchResult<boolean>

Property	Type	Description
data	boolean | null	True if the feature flag is active, false otherwise.
isLoading	boolean	True if the flag status is being fetched.
isDone	boolean	True if the fetch is complete.

Example

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

function Header() {
    const { data: isNewSearchActive } = useFeatureFlagActive('v2-search-enabled');

    return (
        <header>
            <nav>
                <a href="/">Home</a>
                {isNewSearchActive ? <NewSearchBar /> : <OldSearchBar />}
            </nav>
        </header>
    );
}