- Install the Fana React SDK in your project by running
npm i fana-react-sdk - Import the following files into your React project's
App.jsfile
import { FanaConfig, FanaProvider } from 'fana-react-sdk'
- Use the
FanaSDK'sFanaConfigclass constructor to instantiate aconfigobject. This constructor takes three arguments:
- SDK key (from your dashboard's settings page)
- The address of your Flag Bearer
- User Context: This is an object containing the attributes pertaining to the current user
const config = new FanaConfig('sdk_key_0', 'http://localhost:3001', { userId: 'jjuy', beta: true })
^SDK Key ^Flag Bearer Address ^User Context Object- Next, wrap your outermost component in the
<FanaProvider>component. You will pass in your newly createdconfiginstance as an argument to theconfigprop.
function App() {
return (
<FanaProvider config={config}>
<main>
<Header />
<Body />
</main>
</FanaProvider>
);
}Now you can evaluate flags in any component you wish! Make sure to import React's useContext hook, as well as the FanaContext.
Within your component, import React's useContext as well as Fana's FanaContext. Invoke useContext(FanaContext). This will provide you with the client instance which has access to the evaluateFlag method.
const fanaClient = useContext(FanaContext);
const betaHeader = fanaClient.evaluateFlag("beta_header", true);The evaluateFlag method takes two arguments: the flag key that you wish to evaluate, and an optional argument for a default value.
The optional argument will be false if no value is provided. This optional argument will only apply in cases where it cannot determine the value of the provided flag key. This may happen when connection with the Flag Bearer fails, or if the flag key simply does not exist.
evaluateFlag returns true or false depending on how the user context was evaluated. Use this to determine what experience this particular user should receive.
const experienceText = betaHeader ? "beta" : "regular";
return <h1>Welcome to the {experienceText} experience!</h1>;