React SDK

The SDK is a client-side library designed to interact with the FeaturesFlow service, allowing developers to manage feature toggless and trigger events within their applications. This documentation provides an overview of the SDK's functionality, including initialization, retrieving feature toggles, and triggering events.

Installation

To install the SDK, you can use npm or yarn:

npm install @featuresflow/sdk-react

API

Under this section you can find the API reference for the React SDK.

<FeaturesFlowProvider/>

The behavior of the SDK can be customized using config object passed to FeaturesFlowProvider as prop.

useFeatureToggle()

The useFeatureToggle hook allows you to retrieve feature toggles from the FeaturesFlow service. It can only be used within FeaturesFlowProvider component.

useEventTrigger()

The useEventTrigger hook allows you trigger events within FeaturesFlow. It returns an object with triggerEvent property which is a funciton that you can call to trigger an event. It can only be used within FeaturesFlowProvider component.

Usage

Initialization

To initialize the SDK, you can use the FeaturesFlowProvider component. This component takes a config object as a prop, which should contain an authenticationKey and an identifier.

import { FeaturesFlowProvider } from '@featuresflow/sdk-react'
 
const App = () => {
  const config = {
    authenticationKey: 'your_auth_key',
    identifier: 'your_identifier'
  }
 
  return (
    <FeaturesFlowProvider config={config}>
      {/* Your application components */}
    </FeaturesFlowProvider>
  )
}
 
export default App

Targeting rules

You can provide properties to config object. These properties should corespond to targeting rules that you have defined in your feature toggle. This is a very powerful feature that allows you to target specific users or groups of users.

const config = {
  authenticationKey: 'your_authentication_key',
  identifier: 'your_identifier'
  properties: {
    countryCode: 'US',
  }
};

Rendering strategy

By default, the SDK will render children of FeaturesFlowProvider after the SDK is initialized. This means that the SDK will wait for the feature toggles to be loaded before rendering the application. If you want to render the application immediately and load feature toggles in the background, you can use the awaitFeatures property.

const config = {
  authenticationKey: 'your_authentication_key',
  identifier: 'your_identifier',
  options: {
    awaitFeatures: false
  }
};

The awaitFeatures property is by default set to true.

Retrieving Feature Toggles

To retrieve feature toggless, you can use the useFeatureToggle hook. This hook takes a feature toggle key as a parameter and returns a treatment value.

import { useFeatureToggle } from '@featuresflow/sdk-react'
 
type FeatureToggleTreatment = 'Version-A' | 'Version-B' | 'control';
 
const MyComponent = () => {
  const treatment: FeatureToggleTreatment = useFeatureToggle('feature_toggle_key');
 
  return (
    <div>
      {treatment === 'Version-A' ? <VersionA /> : <VersionB />}
    </div>
  )
}

Triggerring events

To trigger an event, you can use the useEventTrigger hook. This hook returns an object that contains a triggerEvent function. You can call this function with an event key and an optional properties object.

import { useEventTrigger } from '@featuresflow/sdk-react'
 
const MyComponent = () => {
  const { triggerEvent } = useEventTrigger();
 
  const handleClick = () => {
    triggerEvent('event_key', { property: 'value' });
  }
 
  ...
}

The second parameter of the triggerEvent function is an object that contains properties that you want to send with the event. These properties should correspond to the properties that you have defined in your event. They can be either number, string or boolean.

Each time you retrive a feature toggle, the SDK will also trigger the feature toggle render. This means that the SDK will send an event to FeaturesFlow service, incrementing traffic recieved for your feature toggle as well as treatment traffic.