My flag value is: {myFlagValue}
} ``` {% hint style="info" %} **NOTE** If the flag can’t be found, undefined is returned unless you passed in a different default value. {% endhint %} **Evaluating multiple flags** Import and use `useFeatureFlags`, for example: ``` import { useFeatureFlags } from '@harnessio/ff-react-client-sdk'; // ... function MyComponent() { const myFlagValues = useFeatureFlags() return ( <>My flag values are:
{JSON.stringify(myFlagValues, null, 2)}
)
}
```
You can also return a subset of flags by using the following:
**Returning a subset of flags**
```
const myFlagValues = useFeatureFlags(['flag1', 'flag2'])
```
**Returning a subset of flags with customized default values**
```
const myFlagValues = useFeatureFlags({
flag1: 'defaultForFlag1',
flag2: 'defaultForFlag2'
})
```
### Test your app is connected to Harness
When you receive a response showing the current status of your feature flag, go to the Harness Platform and toggle the flag on and off. Then, check your app to verify if the flag variation displayed is updated with the variation you toggled.
{% hint style="info" %}
**NOTE**
The SDK must run for at least 60 seconds before it sends metrics. Please ensure metrics have not been disabled in the SDK.
{% endhint %}
### Close the SDK client
In most applications, you won't need to close the SDK client.
However, you should close the SDK client if:
* Your application is about to terminate. Closing the client ensures that all associated resources are released.
* You have determined that you do not need to evaluate flags again in your application lifecycle.
{% hint style="info" %}
**IMPORTANT**
The SDK does not evaluate flags after the client is closed.
{% endhint %}
### Mock the SDK when testing with Jest
When testing your React application with Jest, you may want to mock the SDK to avoid making network requests. You can do this by using the `TestWrapper` component included in the SDK. This component accepts a listing of flags and their values, and mocks the SDK to return those values.
{% hint style="info" %}
**NOTE**
To use the `TestWrapper` component, you must import it from the `dist/cjs/test-utils` directory (not from the main SDK package), as shown in the example below.
{% endhint %}
#### Example
In the example below, we use Testing Library to render the component `Flag1's value is {flags.flag1}
} const MyComponentWithFlags = withFeatureFlags(MyComponent) ``` {% hint style="warning" %} When using async mode, the default value is returned until the flags are retrieved. If you use the `useFeatureFlag` or `useFeatureFlags` hooks, the default value is undefined unless you change it when evaluating the flag. If you are using `withFeatureFlags`, you will receive an empty object. {% endhint %} #### Display a loading component until flags are returned in async mode When using async mode and the `ifFeatureFlag HOC`, by default the component won’t display until the flags are retrieved. This behavior can be overridden by passing a `loadingFallback` element in the options object. This will display the `loadingFallback` until the flags are retrieved, then the component will either show or hide as normal. For example: ``` import { ifFeatureFlag } from '@harnessio/ff-react-client-sdk' // ... function MyComponent() { returnThis should render if the flag is on
} const MyConditionalComponent = ifFeatureFlag('flag1', { loadingFallback:Loading...
})(MyComponent) ``` **Conditionally render a component** You can conditionally render a component by using `ifFeatureFlag`, which is a [higher-order component (HOC)](https://reactjs.org/docs/higher-order-components.html) that wraps your component and returns it only when the named Flag is enabled or matches a specific value. **Render if the flag is enabled** By default `ifFeatureFlag` will render the component if the named flag evaluates as truthy. In the below example, you can use `MyConditionalComponent` as a normal component and it will render the `MyComponent` component if the flag is enabled. ``` import { ifFeatureFlag } from '@harnessio/ff-react-client-sdk'; // ... function MyComponent() { returnThis renders if the flag is enabled
} const MyConditionalComponent = ifFeatureFlag('flag1')(MyComponent) ``` **Render if the condition is matched** By default the component will display if the flag value is evaluated as truthy. This behavior can be overridden by passing the matchValue option in the options object. The flag value will then be compared with `matchValue` to determine whether it should display. For example: ``` import { ifFeatureFlag } from '@harnessio/ff-react-client-sdk' // ... function MyComponent() { returnThis should render if the flag evaluates to 'ABC123'
} const MyConditionalComponent = ifFeatureFlag('flag1', { matchValue: 'ABC123' })( MyComponent ) ``` ### Sample code for a React Client application ``` import React from 'react'; import ReactDOM from 'react-dom' import { FFContextProvider, useFeatureFlag, useFeatureFlags } from '@harnessio/ff-react-client-sdk' ReactDOM.render(The value of "harnessappdemodarkmode" is {JSON.stringify(flagValue)}
) } function MultipleFeatureFlags() { const flags = useFeatureFlags() return ( <>Here are all our flags:
{JSON.stringify(flags, null, 2)}
)
}
```