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.
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.
|**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 `|
|**children**||React.ReactNode | Function
`||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.
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](🔗).