+
+
+
+```
+
+See [useFlag()](#useflag) for a full example
+
+## Setting context
+
+Reflag determines which flags are active for a given `user`, `company`, or `other` context.
+You can pass these to the `ReflagProvider` using the `context` prop.
+
+### Using the `context` prop
+
+```vue
+Loading...
+ Flag not available
+
+
+
+
+
+```
+
+See the reference docs for details.
+
+### `useOptInFlags()` and `useSetOptIn()`
+
+Use these composables to build an end-user opt-in UI for flags where opt-in is enabled in Reflag.
+
+```vue
+
+
+
+ Loading…
+ + + + +``` + +By default, `useSetOptIn()` changes the opt-in for the current user, so the current context must include a `user.id`. To manage the current company's opt-in instead, pass `scope: "company"`; the context must then include a `company.id`. + +User and company opt-ins are managed independently. Setting `optedIn` to `false` removes the opt-in only for the selected scope. For example, cancelling a user's opt-in does not change the company's opt-in for the same flag. + +`setOptIn` returns a promise so you can wait for the new membership state to be synchronized. On success, it resolves after the refreshed flag state has been applied locally, the requested membership change has been confirmed, and subscribers have been notified when flags change. Vue may not have committed the resulting render yet. + +The promise resolves to a `Response`, or `undefined` if skipped due to invalid input, offline mode etc. Check `response?.ok` for success. + +`useOptInFlags()` returns `{ flags, isLoading }`, where both values are computed refs. With `ReflagBootstrappedProvider`, it fetches opt-in metadata on first use and reports `isLoading: true` until that refresh succeeds or fails. + +If fetching opt-in metadata fails, loading ends without exposing an error. Call `client.refresh()` on the client returned by `useClient()` to retry. + +With a regular `ReflagProvider`, opt-in metadata arrives as part of the normal initial flags request, so `useOptInFlags().isLoading` remains `false`. Use the general `useIsLoading()` composable or the provider's loading slot for that initial loading state. + +### `useTrack()` + +`useTrack()` returns a function which lets you send custom events to Reflag. It takes a string argument with the event name and optionally an object with properties to attach the event. + +Using `track` returned from `useFlag()` calls this track function with the flag key as the event name. + +```vue + + + +
+
+
+
+```
+
+### `useRequestFeedback()`
+
+Returns a function that lets you open up a dialog to ask for feedback on a specific feature. This is useful for collecting targeted feedback about specific features.
+
+See [Automated Feedback Surveys](https://docs.reflag.com/product-handbook/live-satisfaction) for how to do this automatically, without code.
+
+When using the `useRequestFeedback` you must pass the flag key to `requestFeedback`.
+The example below shows how to use `position` to ensure the popover appears next to the "Give feedback!" button.
+
+```vue
+
+
+
+
+
+```
+
+See the [Feedback Documentation](https://github.com/reflagcom/javascript/blob/main/packages/browser-sdk/FEEDBACK.md#manual-feedback-collection) for more information on `requestFeedback` options.
+
+### `useSendFeedback()`
+
+Returns a function that lets you send feedback to Reflag. This is useful if you've manually collected feedback through your own UI and want to send it to Reflag.
+
+```vue
+
+
+
+
+
+```
+
+### `useUpdateUser()`, `useUpdateCompany()` and `useUpdateOtherContext()`
+
+These composables return functions that let you update the attributes for the currently set user, company, or other context. Updates to user/company are stored remotely and affect flag targeting, while "other" context updates only affect the current session.
+
+```vue
+
+
+
+
+
+
+
+
+
+```
+
+Note: To change the `user.id` or `company.id`, you need to update the props passed to `ReflagProvider` instead of using these composables.
+
+### `useClient()`
+
+Returns the `ReflagClient` used by the `ReflagProvider`. The client offers more functionality that
+is not directly accessible through the other composables.
+
+```vue
+
+
+
+
+
+```
+
+### `useIsLoading()`
+
+Returns a `Ref| Property | +Type | +Description | +
|---|---|---|
| + + `id` + + | ++ +`undefined` \| `string` \| `number` + + | ++ +Company id + + | +
| + + `name?` + + | ++ +`string` + + | ++ +Company name + + | +
| Type Parameter | +Default type | +
|---|---|
| + +`TConfig` *extends* [`FlagType`](globals.md#flagtype)\[`"config"`\] + + | ++ +[`EmptyFlagRemoteConfig`](globals.md#emptyflagremoteconfig) + + | +
| Name | +Type | +
|---|---|
| + +`flags` + + | ++ +[`RawFlags`](../browser-sdk/globals.md#rawflags) + + | +
| Name | +Type | +
|---|---|
| + + `key` + + | ++ +`undefined` + + | +
| + + `payload` + + | ++ +`undefined` + + | +
| Name | +Type | +
|---|---|
| + + `config`? + + | ++ +\{ + `payload`: `any`; + \} + + | +
| + +`config.payload` + + | ++ +`any` + + | +
| Name | +Type | +
|---|---|
| + +`key` + + | ++ +[`FlagKey`](globals.md#flagkey) + + | +
| Name | +Type | +Description | +
|---|---|---|
| + +`flags` + + | ++ +[`BootstrappedFlags`](globals.md#bootstrappedflags) + + | ++ +Pre-fetched flags used for the initial render. The browser client fetches opt-in +metadata on demand when opt-in flags are requested. + + | +
| Name | +Type | +Description | +
|---|---|---|
| + +`client` + + | ++ +[`ReflagClient`](../browser-sdk/globals.md#reflagclient) + + | ++ +A pre-initialized ReflagClient to use. + + | +
| Name | +Type | +Description | +
|---|---|---|
| + +`company`? + + | ++ +[`CompanyContext`](globals.md#companycontext) + + | ++ +Company related context. If you provide `id` Reflag will enrich the evaluation context with +company attributes on Reflag servers. + +**Deprecated** + +Use `context` instead, this property will be removed in the next major version + + | +
| + +`context`? + + | ++ +[`ReflagContext`](../browser-sdk/globals.md#reflagcontext) + + | ++ +The context to use for the ReflagClient containing user, company, and other context. + + | +
| + +`otherContext`? + + | ++ +[`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)\<`string`, `string` \| `number` \| `undefined`\> + + | ++ +Context which is not related to a user or a company. + +**Deprecated** + +Use `context` instead, this property will be removed in the next major version + + | +
| + +`user`? + + | ++ +[`UserContext`](globals.md#usercontext) + + | ++ +User related context. If you provide `id` Reflag will enrich the evaluation context with +user attributes on Reflag servers. + +**Deprecated** + +Use `context` instead, this property will be removed in the next major version + + | +
| Name | +Type | +
|---|---|
| + + `flags` + + | ++ +`ComputedRef`\<[`OptInFlag`](globals.md#optinflag)[]\> + + | +
| + + `isLoading` + + | ++ +`ComputedRef`\<`boolean`\> + + | +
| Name | +Type | +
|---|---|
| + + `install()` + + | ++ +`void` + + | +
| Type Parameter | +
|---|
| + +`TKey` *extends* `string` + + | +
| Parameter | +Type | +Description | +
|---|---|---|
| + +`key` + + | ++ +`TKey` + + | ++ +The key of the flag to get the state of. + + | +
| Type Parameter | +
|---|
| + +`THookType` *extends* keyof [`HookArgs`](../browser-sdk/globals.md#hookargs) + + | +
| Parameter | +Type | +Description | +
|---|---|---|
| + +`event` + + | ++ +`THookType` + + | ++ +The event to listen to. + + | +
| + +`handler` + + | ++ +(`arg0`: [`HookArgs`](../browser-sdk/globals.md#hookargs)\[`THookType`\]) => `void` + + | ++ +The function to call when the event is triggered. + + | +
| + +`client`? + + | ++ +[`ReflagClient`](../browser-sdk/globals.md#reflagclient) + + | ++ +The Reflag client to listen to. If not provided, the client will be retrieved from the context. + + | +
| Parameter | +Type | +
|---|---|
| + +`options` + + | ++ +[`RequestFeedbackData`](../browser-sdk/globals.md#requestfeedbackdata) + + | +
| Parameter | +Type | +
|---|---|
| + +`opts` + + | ++ +[`UnassignedFeedback`](../browser-sdk/globals.md#unassignedfeedback) + + | +
| Parameter | +Type | +
|---|---|
| + +`key` + + | ++ +`string` + + | +
| + +`options` + + | ++ +[`SetOptInOptions`](globals.md#setoptinoptions) + + | +
| Parameter | +Type | +
|---|---|
| + +`eventName` + + | ++ +`string` + + | +
| + +`attributes`? + + | ++ + \| `null` \| [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)\<`string`, `any`\> + + | +
| Parameter | +Type | +
|---|---|
| + +`opts` + + | ++ +\{\} + + | +
| Parameter | +Type | +
|---|---|
| + +`opts` + + | ++ +\{\} + + | +
| Parameter | +Type | +
|---|---|
| + +`opts` + + | ++ +\{\} + + | +