GuidesAPI Reference
Submit Documentation FeedbackJoin Developer CommunityLog In

OptimizelyFeature

The OptimizelyFeature component allows you to evaluate the state of a feature flag and its variables for a given user. 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.


Did this page help you?