Link Search Menu Expand Document

Using flags

This page explains how to retrieve and use feature flags in your React application.

Get feature flags with a React hook

Inside a React component, use the useFlag() hook to retrieve a feature flag.

import {useFlag} from "appflags-react";

function ExampleComponent() {
    const flag = useFlag("flag_key");
}

Using the feature flag

To get the value of the feature flag variation, use the value property.

The value property will be a boolean, number, or string based on the flag’s variation type. See Variation types.

For example, a boolean flag could be used like this:

function ExampleComponent() {
    const flag = useFlag("feature_toggle");

    return (
        <div>
            {flag?.value &&
                <div>The feature is enabled</div>
            }
        </div>
    );
}

Understanding AppFlags client initialization

The AppFlags client takes about 100ms to initialize.

Before initialization has completed, useFlag() will return undefined. After initialization is complete, useFlag() will return the flag and the component will re-render. After the client has initialized, future calls to useFlag() will immediately return the flag.

Ensure that your React component handles an undefined flag value.

Using the JavaScript SDK

If needed, the React SDK includes the full JavaScript SDK.

To use the JavaScript SDK, import AppFlags

import AppFlags from "appflags-react";

Refer to the JavaScript SDK documentation.


© 2020 AppFlags