HomeGuidesAPI Reference
Submit Documentation FeedbackJoin Developer CommunityOptimizely GitHubOptimizely NuGetLog In

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.

**feature**stringThe key of the feature to check. The feature key is defined from the Features dashboard.
**autoUpdate** _optional_booleanIf true, this component will re-render in response to datafile or user changes. Default: false.
**timeout** _optional_numberRendering 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.

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:

## Source files

The language/platform source files containing the implementation for React is [index.ts](🔗).