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.
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](🔗).