React

Quickstart

Set up a GhostPort project

Follow the instructions from the Getting Started page.

Install the use-ghostport NPM module

Install the use-ghostport NPM module.

npm install --save use-ghostport

Wrap the app in GhostPortProvider

import { GhostPortProvider } from 'use-ghostport';
<GhostPortProvider token={"YOUR_TOKEN"}>
    <App />
</GhostPortProvider>

Use a flag with useFeature hook

import { useFeature } from 'use-ghostport';
export function App() {
    const showHeader = useFeature('showHeader', false, true);
    return (
        <div>
            {showHeader && (
                <h1>The header is visible</h1>
            )}
            Main content
        </div>
    );
}

API

GhostPortProvider

The provider that must be present at a higher level in the React tree than any calls to useFeature.

Props:

• token - An environment token obtained from GhostPort.
• userKey (optional) - A value uniquely identifying a user in your app.
• properties (optional) - Arbitrary object with primitive values to use for feature targeting rules.

useFeature

A hook to obtain the value of a feature flag, by its key.

Arguments:

• flagKey - The key of the flag to obtain the value from.
• defaultValue - The value to return if the key does not exist, or if there is an error reaching the GhostPort API.
• live (optional boolean, default false) - True if the feature value should be pushed immediately when updated in the GhostPort UI.