Feature is enabled!
Feature is disabled :(
Feature {featureKey} is {isEnabled ? 'enabled' : 'disabled' }.
``` With just a few lines of code, we can now evaluate feature flags in our Astro components. ## Regular client-side usage If your use case is not server-side rendering or at build time, you can use the SDK instance directly in your client-side code: - [JavaScript SDK](/docs/sdks) - [React SDK](/docs/react) - [Vue.js SDK](/docs/vue) ## Bucketing guidelines If you are using Featurevisor for gradual rollouts or A/B testing, you should make sure that the [bucketing](/docs/bucketing) is consistent when rendering your components. Usually bucketing is done by passing the User's ID when the user is already known, or a randomly generated UUID for the device if the user has not logged in yet. When evaluating using the SDK instance, we would be passing these values as `context` object: ```ts const context = { userId: '123', deviceId: 'Feature is enabled
} returnFeature is disabled
} ``` ### useVariation Get a feature's evaluated variation: ```jsx import React from 'react': import { useVariation } from '@featurevisor/react'; function MyComponent(props) { const featureKey = 'myFeatureKey'; const variation = useVariation(featureKey); if (variation === 'b') { returnB variation
; } if (variation === 'c') { returnC variation
; } // default returnDefault experience
; }; ``` ### useVariable Get a feature's evaluated variable value: ```jsx import React from 'react': import { useVariable } from '@featurevisor/react'; function MyComponent(props) { const featureKey = 'myFeatureKey'; const variableKey = 'color'; const colorValue = useVariable(featureKey, variableKey); returnColor: {colorValue}
; }; ``` ### useSdk In case you need to access the underlying Featurevisor SDK instance: ```jsx import React from 'react' import { useSdk } from '@featurevisor/react' function MyComponent(props) { const f = useSdk() return...
} ``` ## Passing additional context All the evaluation hooks accept an optional argument for passing additional component-level context: ```js const context = { // ... additional context here in component } useFlag(featureKey, context) useVariation(featureKey, context) useVariable(featureKey, variableKey, context) ``` ## Reactivity All the evaluation hooks are reactive. This means that your components will automatically re-render when: - a newer [datafile is set](/docs/sdks/javascript/#setting-datafile) - [context is set or updated](/docs/sdks/javascript/#context) - [sticky features are set or updated](/docs/sdks/javascript/#sticky) The re-rendering logic is smart enough to compare previously known value with the new evaluated value, and will only re-render the component if the value has changed. If you do not want any reactivity, you are better off using the Featurevisor SDK instance directly in your component. ## Optimization Given the nature of components in React, they can re-render many times. You are advised to minimize the number of calls to Featurevisor SDK in your components by using memoization techniques. ## Example repository You can find a fully functional example of a React application using Featurevisor SDK here: [https://github.com/featurevisor/featurevisor-example-react](https://github.com/featurevisor/featurevisor-example-react).