OptimizelyFeature

This topic describes the OptimizelyFeature component, which allows you to evaluate the state of a feature flag and its variables for a given user.

Suggest Edits

The purpose of this component is to allow you to separate the process of developing and deploying features from the decision to turn on a feature. Build your feature and deploy it to your application behind this component, then turn the feature on or off for specific users.

Version

SDK v1.0.0

Description

The OptimizelyFeature component traverses the client's datafile and checks the feature flag for the feature key that you specify. The component then evaluates the feature rollout for a user and checks whether the rollout is enabled based on the appropriate traffic allocation and audience targeting.

The component passes a boolean prop, isEnabled, to its children indicating whether the feature is enable as well as an object prop, variables, indicating the feature variable values associated with the feature.

Props

The table below lists the required and optional props for the OptimizelyFeature Component in React.

Parameter	Type	Description
feature	string	The key of the feature to check. The feature key is defined from the Features dashboard.
autoUpdate optional	boolean	If true, this component will re-render in response to datafile or user changes. Default: false.
timeout optional	number	Rendering timeout in milliseconds. If Optimizely has not initialized before this timeout, the OptimizelyFeature will render with `isEnabled` as `false` and the `variables` as their default values. This timeout overrides any timeout set on the ancestor OptimizelyProvider.
children	React.ReactNode \| Function with props: `isEnabled` (boolean) indicating whether the feature is enabled or not. `variables` (object) mapping feature variable keys to feature variable values.	Content or function returning content to be rendered based on the enabled status and variable values of the feature. See example usage below.

Examples

Import the OptimizelyFeature component from the React SDK.

import { OptimizelyFeature } from '@optimizely/react-sdk'

Find a component you would like to control with a feature flag and wrap it in the OptimizelyFeature component.

If your feature key was 'hello_world' then you could pass the 'hello_world' string as the feature prop and use the feature component to render different content and different variables like the following:

<OptimizelyFeature feature="hello_world">
  {(isEnabled, variables) => (
    isEnabled
    ? (<p> Feature enabled! Variable values: { JSON.stringify(variables) } </p>)
    : (<p> Feature not enabled. Variable values: { JSON.stringify(variables) } </p>)
  )}
</OptimizelyFeature>

Source files

The language/platform source files containing the implementation for React is index.ts.

Updated about 2 years ago