HomeGuidesAPI Reference
Submit Documentation FeedbackJoin Developer CommunityLog In


This topic describes the OptimizelyFeature component, which 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.


SDK v1.0.0


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.


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






The key of the feature to check.
The feature key is defined from the Features dashboard.



If true, this component will re-render in response to datafile or user changes. Default: false.



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.


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.


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) => (
    ? (<p> Feature enabled! Variable values: { JSON.stringify(variables) } </p>)
    : (<p> Feature not enabled. Variable values: { JSON.stringify(variables) } </p>)

Source files

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

Did this page help you?