This is page 5 of 7. Use http://codebase.md/bucketco/docs/integrations/.gitbook/assets/posthog.svg?format=md&lines=true&page={x} to view the full context.

# Directory Structure

```
├── .gitbook
│   ├── assets
│   │   ├── 03642c5-dwFrame_201 (1).png
│   │   ├── 03642c5-dwFrame_201.png
│   │   ├── 1753259671871 (1).jpeg
│   │   ├── 1a0b50d-image.png
│   │   ├── 1a439d9-image.png
│   │   ├── 2506596-Customized_Widgets.png
│   │   ├── 342658e-image.png
│   │   ├── 4017197-image.png
│   │   ├── 43e55f0-image.png
│   │   ├── 4783e3f-image.png
│   │   ├── 5b0ce63-image (1).png
│   │   ├── 5b0ce63-image.png
│   │   ├── 630b5e9-image.png
│   │   ├── 8bf8a6e-Frame_201.png
│   │   ├── 9efd67c-image.png
│   │   ├── aa37226-image.png
│   │   ├── Access (1) (1).png
│   │   ├── Access (1).png
│   │   ├── Access (2).png
│   │   ├── Access.png
│   │   ├── Adding features to a feature view-min.png
│   │   ├── Adopted-min.png
│   │   ├── Adoption strategy V2-min.png
│   │   ├── Adoption strategy-min.png
│   │   ├── Advanced targeting rules V2-min.png
│   │   ├── Advanced targeting rules v3-min.png
│   │   ├── Advanced targeting rules-min.png
│   │   ├── aecc6f2-image.png
│   │   ├── amplitude.svg
│   │   ├── An example targeting configuration with two rules.-min.png
│   │   ├── api.svg
│   │   ├── App Settings-min.png
│   │   ├── Automated feedback surveys settings v3-min.png
│   │   ├── Automated feedback surveys settings-min.png
│   │   ├── Automated feedback surveys-min.png
│   │   ├── aws-s3.svg
│   │   ├── be124cd-dwdwFrame_201 (1).png
│   │   ├── be124cd-dwdwFrame_201.png
│   │   ├── ccc4f9e-image.png
│   │   ├── CleanShot 2024-06-11 at 8 .25.53@2x.png
│   │   ├── CleanShot 2024-11-22 at 8 .29.42@2x.png
│   │   ├── CleanShot 2024-11-22 at 8 .31.17@2x.png
│   │   ├── CleanShot 2024-11-25 at 9 .28.08@2x.png
│   │   ├── CleanShot 2024-11-25 at 9 .33.10@2x.png
│   │   ├── CleanShot 2024-11-25 at 9 .35.11@2x.png
│   │   ├── CleanShot 2024-11-27 at 10 .45.59@2x.png
│   │   ├── CleanShot 2024-11-27 at 10 .46.36@2x.png
│   │   ├── CleanShot 2024-11-27 at 10 .47.14@2x.png
│   │   ├── CleanShot 2024-11-27 at 10 .50.48@2x.png
│   │   ├── CleanShot 2025-01-07 at 1 .19.36@2x.png
│   │   ├── CleanShot 2025-01-07 at 1 .21.09@2x.png
│   │   ├── CleanShot 2025-01-07 at 1 .22.27@2x.png
│   │   ├── CleanShot 2025-01-07 at 12 .34.32@2x.png
│   │   ├── CleanShot 2025-01-07 at 12 .39.12@2x (1).png
│   │   ├── CleanShot 2025-01-07 at 12 .39.12@2x.png
│   │   ├── CleanShot 2025-01-09 at 10 .56.14@2x.png
│   │   ├── CleanShot 2025-01-09 at 11 .11.54@2x (1).png
│   │   ├── CleanShot 2025-01-09 at 11 .11.54@2x.png
│   │   ├── CleanShot 2025-01-09 at 9 .44.28@2x.png
│   │   ├── CleanShot 2025-01-23 at 1 .48.30@2x.png
│   │   ├── CleanShot 2025-01-23 at 1 .49.29@2x.png
│   │   ├── CleanShot 2025-01-23 at 1 .49.55@2x.png
│   │   ├── CleanShot 2025-01-23 at 2 .10.23@2x.png
│   │   ├── CleanShot 2025-05-09 at 1 .29.05@2x.png
│   │   ├── CleanShot 2025-10-09 at 10 .23.21@2x.png
│   │   ├── Companies Tab-min.png
│   │   ├── Companies-min.png
│   │   ├── company example v2-min (1).png
│   │   ├── company example v2-min.png
│   │   ├── company example v3-min.png
│   │   ├── Company segment filters-min.png
│   │   ├── Create a new environment-min.png
│   │   ├── Creating and managing apps-min.png
│   │   ├── cursor-mcp-demo_h264.mp4
│   │   ├── datadog.svg
│   │   ├── Debugger-min (1).png
│   │   ├── Debugger-min (2).png
│   │   ├── Debugger-min.png
│   │   ├── Enabling Feedback Surveys-min.png
│   │   ├── Environments Page V2-min.png
│   │   ├── Environments Switcher-min.png
│   │   ├── Environments-min.png
│   │   ├── Evaluate Feature.png
│   │   ├── example 1 (1).png
│   │   ├── example 1.png
│   │   ├── example 2 (1).png
│   │   ├── example 2.png
│   │   ├── ezgif-242d06617aea38.gif
│   │   ├── Feature Tab-min.png
│   │   ├── Feature targeting rules example v2-min.png
│   │   ├── Feature targeting rules example V2-min.png
│   │   ├── Feature targeting rules example v3-min.png
│   │   ├── Feature targeting rules example-min.png
│   │   ├── Feature targeting rules UI V2-min.png
│   │   ├── Feature targeting rules UI v3-min.png
│   │   ├── Feature targeting rules UI-min.png
│   │   ├── Feature usage configuration-v2-min.png
│   │   ├── Feature view.png
│   │   ├── feature-flag-list-rum-event.d9c1c876a34458edc70d1317efaec05b.png.avif
│   │   ├── Feature-targeting-rules-v2-min.png
│   │   ├── Features Page V2-min (1).png
│   │   ├── Features Page V2-min.png
│   │   ├── Features Page-min.png
│   │   ├── Features-min.png
│   │   ├── Feedback Tab V2-min.png
│   │   ├── Feedback-min.png
│   │   ├── Getting started-min.png
│   │   ├── gitbook-logo.svg
│   │   ├── github-logo.svg
│   │   ├── Global settings - Feature views-min.png
│   │   ├── Global settings - Manual Targeting-min.png
│   │   ├── Global settings - Release Stages Editing V4-min.png
│   │   ├── Global settings - Release Stages-min.png
│   │   ├── Goal Form.png
│   │   ├── How to use release stages v2-min.png
│   │   ├── How to use release stages-min (1).png
│   │   ├── How to use release stages-min.png
│   │   ├── https___content.gitbook.com_content_pgXAy2Cgsm5pON9oJ06m_blobs_6wGbrQlJPE4JllBuIhla_image (1).png
│   │   ├── image (1) (1).png
│   │   ├── image (1) (2).png
│   │   ├── image (1).png
│   │   ├── image (10).png
│   │   ├── image (11).png
│   │   ├── image (12).png
│   │   ├── image (13).png
│   │   ├── image (14).png
│   │   ├── image (15).png
│   │   ├── image (16).png
│   │   ├── image (17).png
│   │   ├── image (18).png
│   │   ├── image (19).png
│   │   ├── image (2) (1).png
│   │   ├── image (2).png
│   │   ├── image (20).png
│   │   ├── image (21).png
│   │   ├── image (22).png
│   │   ├── image (23).png
│   │   ├── image (24).png
│   │   ├── image (25).png
│   │   ├── image (26).png
│   │   ├── image (27).png
│   │   ├── image (28).png
│   │   ├── image (29).png
│   │   ├── image (3).png
│   │   ├── image (30).png
│   │   ├── image (31).png
│   │   ├── image (32).png
│   │   ├── image (33).png
│   │   ├── image (4).png
│   │   ├── image (5).png
│   │   ├── image (6).png
│   │   ├── image (7).png
│   │   ├── image (8).png
│   │   ├── image (9).png
│   │   ├── image.png
│   │   ├── Iterate Feature V2.png
│   │   ├── LInear mention.mp4
│   │   ├── linear.svg
│   │   ├── mcp-remote-min.mp4
│   │   ├── mcp-remote.mp4
│   │   ├── mixpanel.svg
│   │   ├── Modifying or deleting an app-min.png
│   │   ├── Monitor (1) (1).png
│   │   ├── Monitor (1).png
│   │   ├── Monitor (2).png
│   │   ├── Monitor (3).png
│   │   ├── Monitor (4).png
│   │   ├── Monitor (5).png
│   │   ├── Monitor (6).png
│   │   ├── Monitor (7).png
│   │   ├── Monitor.png
│   │   ├── New feature.png
│   │   ├── next-js.svg
│   │   ├── node-js.svg
│   │   ├── openfeature.svg
│   │   ├── posthog.svg
│   │   ├── Pre-Release.png
│   │   ├── react.svg
│   │   ├── Release Goals.png
│   │   ├── Release Stage Beta Targeting Rules v3-min.png
│   │   ├── Release Stage Beta Targeting Rules V3-min.png
│   │   ├── Release Stage Beta Targeting Rules V5-min.png
│   │   ├── Release Stage Beta Targeting Rules-min.png
│   │   ├── remote config - 3.png
│   │   ├── Remote config.png
│   │   ├── Rolling back flags-V2.png
│   │   ├── Rules in other environments.png
│   │   ├── rum-explorer-error-feature-flag-search.7b9f6c046db1de1c71d279c139f1508a.png.avif
│   │   ├── rum-explorer-session-feature-flag-search.435802460fd607608ad5155f029da57b.png.avif
│   │   ├── Satisfaction feedback-min.png
│   │   ├── Satisified-min.png
│   │   ├── Save the segment-min.png
│   │   ├── Saving New Segment-min.png
│   │   ├── Screenshot 2024-08-14 at 19.25.06 (1).png
│   │   ├── Screenshot 2024-08-14 at 19.25.06.png
│   │   ├── Screenshot 2024-08-15 at 13.57.46.png
│   │   ├── Screenshot 2024-10-10 at 14.04.09.png
│   │   ├── Screenshot 2024-10-10 at 14.04.34.png
│   │   ├── Screenshot 2025-07-10 at 14.04.07.png
│   │   ├── Screenshot 2025-07-10 at 14.11.01.png
│   │   ├── Screenshot 2025-07-10 at 14.29.20.png
│   │   ├── Screenshot 2025-07-15 at 21.31.16.png
│   │   ├── Screenshot 2025-07-21 at 20.07.27.png
│   │   ├── Screenshot 2025-09-02 at 17.08.25.png
│   │   ├── Screenshot 2025-09-02 at 17.10.36 (1).png
│   │   ├── Screenshot 2025-09-02 at 17.10.36 (2).png
│   │   ├── Screenshot 2025-09-02 at 17.10.36.png
│   │   ├── Screenshot 2025-09-02 at 17.11.21 (1).png
│   │   ├── Screenshot 2025-09-02 at 17.11.21.png
│   │   ├── Screenshot 2025-09-02 at 17.13.15 (1).png
│   │   ├── Screenshot 2025-09-02 at 17.13.15.png
│   │   ├── Screenshot 2025-09-02 at 17.19.44 (1).png
│   │   ├── Screenshot 2025-09-02 at 17.19.44.png
│   │   ├── Screenshot 2025-09-09 at 09.32.31.png
│   │   ├── Screenshot 2025-09-12 at 11.50.41.png
│   │   ├── Screenshot 2025-09-12 at 12.30.38.png
│   │   ├── Screenshot 2025-09-12 at 13.14.44.png
│   │   ├── Screenshot 2025-09-12 at 13.18.07.png
│   │   ├── Screenshot 2025-09-12 at 13.21.25.png
│   │   ├── Screenshot 2025-09-12 at 13.25.21.png
│   │   ├── Screenshot 2025-09-12 at 14.29.56.png
│   │   ├── Screenshot 2025-09-12 at 14.37.52.png
│   │   ├── Screenshot 2025-09-12 at 14.58.27.png
│   │   ├── Screenshot 2025-09-12 at 15.00.32.png
│   │   ├── Screenshot 2025-09-12 at 15.01.32.png
│   │   ├── Screenshot 2025-09-12 at 15.03.33.png
│   │   ├── Screenshot 2025-09-12 at 15.04.39.png
│   │   ├── Screenshot 2025-09-12 at 15.06.50.png
│   │   ├── Screenshot 2025-09-12 at 15.13.45.png
│   │   ├── Screenshot 2025-09-12 at 15.14.43.png
│   │   ├── Screenshot 2025-09-12 at 15.16.42.png
│   │   ├── Screenshot 2025-09-12 at 15.18.42.png
│   │   ├── Screenshot 2025-09-12 at 15.32.39.png
│   │   ├── Screenshot 2025-09-12 at 15.33.57.png
│   │   ├── Screenshot 2025-09-12 at 15.35.09.png
│   │   ├── Screenshot 2025-09-12 at 15.36.14.png
│   │   ├── segment (1).svg
│   │   ├── segment.svg
│   │   ├── Segments.png
│   │   ├── Set segment conditions-min.png
│   │   ├── Setting multiple targeting rules.png
│   │   ├── Setting Tab-min.png
│   │   ├── Setting targeting rules v3-min.png
│   │   ├── Setting targeting rules-min.png
│   │   ├── Settings-min (1).png
│   │   ├── Settings-min.png
│   │   ├── slack (1).svg
│   │   ├── Slack (with auto-layout)-min.png
│   │   ├── Slack and Environments-min.png
│   │   ├── Slack and Feature views-min.png
│   │   ├── Slack Integration.png
│   │   ├── Slack Settings under Features-min.png
│   │   ├── Slack with User Feedback.png
│   │   ├── slack.svg
│   │   ├── slackConnected (1).png
│   │   ├── slackConnected.png
│   │   ├── slackDisconnected (1).png
│   │   ├── slackDisconnected.png
│   │   ├── STARS Configuration-min.png
│   │   ├── STARS Feature Funnel-min.png
│   │   ├── STARS Feature Report-min.png
│   │   ├── STARS states.png
│   │   ├── surveys-min.png
│   │   ├── Switching Between Environments-min.png
│   │   ├── Targeting rules interface-min.png
│   │   ├── Targeting rules.png
│   │   ├── There are 5 different types of conditions to chose from-min.png
│   │   ├── Track adoption in the UI V2-min.png
│   │   ├── Track adoption in the UI v3-min.png
│   │   ├── Track adoption in the UI-min.png
│   │   ├── Track new feature V2-min.png
│   │   ├── Tracking Tab-min.png
│   │   ├── ts-js.svg
│   │   ├── type-check-failed.png
│   │   ├── type-check-payload-failed.png
│   │   ├── usage attribute example v3.png
│   │   ├── usage attribute example-min.png
│   │   ├── Usage configuration-min.png
│   │   ├── vercel-logo.svg
│   │   ├── vue-logo.svg
│   │   ├── What is the STARS Framework v3-min.png
│   │   └── What is the STARS Framework_-min.png
│   └── includes
│       ├── integrations.md
│       ├── languages.md
│       ├── need-some-help-chat-with-us.md
│       ├── sdks.md
│       └── untitled.md
├── .github
│   └── README.md
├── .vscode
│   └── settings.json
├── api
│   ├── api-access.md
│   ├── cli.md
│   ├── mcp.md
│   ├── public-api
│   │   ├── public-api-reference.md
│   │   └── README.md
│   └── reflag-rest-api
│       ├── README.md
│       └── reflag-api-reference.md
├── guides
│   ├── self-opt-in.md
│   └── use-reflag-in-your-cli.md
├── integrations
│   ├── amplitude.md
│   ├── aws-s3.md
│   ├── cursor.md
│   ├── datadog.md
│   ├── github.md
│   ├── linear.md
│   ├── mixpanel.md
│   ├── overview.md
│   ├── posthog.md
│   ├── segment.md
│   └── slack.md
├── introduction
│   └── concepts
│       ├── app.md
│       ├── company.md
│       ├── environment.md
│       ├── event.md
│       ├── feature-events.md
│       ├── feature-view.md
│       ├── feature.md
│       ├── feedback.md
│       ├── filter.md
│       ├── README.md
│       ├── release-stage.md
│       ├── segment.md
│       ├── targeting-rules.md
│       └── user.md
├── product-handbook
│   ├── anonymous-users.md
│   ├── concepts
│   │   ├── app.md
│   │   ├── company.md
│   │   ├── environment.md
│   │   ├── event.md
│   │   ├── feature-events.md
│   │   ├── feature-view.md
│   │   ├── feature.md
│   │   ├── feedback.md
│   │   ├── filter.md
│   │   ├── README.md
│   │   ├── release-stage.md
│   │   ├── segment.md
│   │   ├── targeting-rules.md
│   │   └── user.md
│   ├── creating-and-managing-apps
│   │   ├── environments.md
│   │   └── README.md
│   ├── creating-and-managing-apps.md
│   ├── creating-segments.md
│   ├── data-export.md
│   ├── data-residency.md
│   ├── feature-clean-up-and-archival-beta
│   │   ├── ai-code-clean-up-beta.md
│   │   └── README.md
│   ├── feature-entitlements
│   │   ├── README.md
│   │   └── simple-role-based-entitlements.md
│   ├── feature-rollouts
│   │   ├── feature-targeting-rules.md
│   │   └── README.md
│   ├── feature-targeting-rules
│   │   ├── creating-segments.md
│   │   └── environments.md
│   ├── feature-views.md
│   ├── launch-monitor
│   │   ├── automated-feedback-surveys.md
│   │   ├── give-feedback-button.md
│   │   └── README.md
│   ├── product-overview.md
│   ├── remote-config.md
│   ├── self-opt-in.md
│   ├── service-resiliency.md
│   ├── team-permissions.md
│   └── type-safety.md
├── README.md
├── sdk
│   ├── _media
│   │   ├── type-check-failed.png
│   │   └── type-check-payload-failed.png
│   ├── @reflag
│   │   ├── browser-sdk
│   │   │   ├── globals.md
│   │   │   └── README.md
│   │   ├── node-sdk
│   │   │   ├── globals.md
│   │   │   └── README.md
│   │   ├── react-sdk
│   │   │   ├── globals.md
│   │   │   └── README.md
│   │   └── vue-sdk
│   │       ├── globals.md
│   │       └── README.md
│   ├── documents
│   │   ├── browser-sdk
│   │   │   └── FEEDBACK.md
│   │   └── cli
│   │       └── README.md
│   └── README.md
├── SUMMARY.md
├── support
│   └── get-support.md
└── supported-languages
    ├── next.js.md
    ├── openfeature.md
    ├── overview.md
    └── ruby-rails-stimulus.md
```

# Files

--------------------------------------------------------------------------------
/sdk/documents/browser-sdk/FEEDBACK.md:
--------------------------------------------------------------------------------

```markdown
  1 | ---
  2 | layout:
  3 |   visible: true
  4 | title:
  5 |   visible: true
  6 | description:
  7 |   visible: false
  8 | tableOfContents:
  9 |   visible: true
 10 | outline:
 11 |   visible: true
 12 | pagination:
 13 |   visible: true
 14 | ---
 15 | 
 16 | # Reflag Feedback UI
 17 | 
 18 | The Reflag Browser SDK includes a UI you can use to collect feedback from user
 19 | about particular flags.
 20 | 
 21 | ![image](https://github.com/reflagcom/javascript/assets/34348/c387bac1-f2e2-4efd-9dda-5030d76f9532)
 22 | 
 23 | ## Global feedback configuration
 24 | 
 25 | The Reflag Browser SDK feedback UI is configured with reasonable defaults,
 26 | positioning itself as a [dialog](#dialog) in the lower right-hand corner of
 27 | the viewport, displayed in English, and with a [light-mode theme](#custom-styling).
 28 | 
 29 | These settings can be overwritten when initializing the Reflag Browser SDK:
 30 | 
 31 | ```typescript
 32 | const reflag = new ReflagClient({
 33 |   publishableKey: "reflag-publishable-key",
 34 |   user: { id: "42" },
 35 |   feedback: {
 36 |     ui: {
 37 |       position: POSITION_CONFIG, // See positioning section
 38 |       translations: TRANSLATION_KEYS, // See internationalization section
 39 | 
 40 |       // Enable automated feedback surveys. Default: `true`
 41 |       enableAutoFeedback: boolean,
 42 | 
 43 |       /**
 44 |        * Do your own feedback prompt handling or override
 45 |        * default settings at runtime.
 46 |        */
 47 |       autoFeedbackHandler: (promptMessage, handlers) => {
 48 |         // See Automated Feedback Surveys section
 49 |       },
 50 |     },
 51 |   },
 52 | });
 53 | ```
 54 | 
 55 | See also:
 56 | 
 57 | - [Positioning and behavior](#positioning-and-behavior) for the position option,
 58 | - [Static language configuration](#static-language-configuration) if you want to translate the feedback UI,
 59 | - [Automated feedback surveys](#automated-feedback-surveys) to override default configuration.
 60 | 
 61 | ## Automated feedback surveys
 62 | 
 63 | Automated feedback surveys are enabled by default.
 64 | 
 65 | When automated feedback surveys are enabled, the Reflag Browser SDK
 66 | will open and maintain a connection to the Reflag service. When a user
 67 | triggers an event tracked by a flag and is eligible to be prompted
 68 | for feedback, the Reflag service will send a request to the SDK instance.
 69 | By default, this request will open up the Reflag feedback UI in the user's
 70 | browser, but you can intercept the request and override this behavior.
 71 | 
 72 | The live connection for automated feedback is established when the
 73 | `ReflagClient` is initialized.
 74 | 
 75 | ### Disabling automated feedback surveys
 76 | 
 77 | You can disable automated collection in the `ReflagClient` constructor:
 78 | 
 79 | ```typescript
 80 | const reflag = new ReflagClient({
 81 |   publishableKey: "reflag-publishable-key",
 82 |   user: { id: "42" },
 83 |   feedback: {
 84 |     enableAutoFeedback: false,
 85 |   },
 86 | });
 87 | ```
 88 | 
 89 | ### Overriding prompt event defaults
 90 | 
 91 | If you are not satisfied with the default UI behavior when an automated prompt
 92 | event arrives, you can can [override the global defaults](#global-feedback-configuration)
 93 | or intercept and override settings at runtime like this:
 94 | 
 95 | ```javascript
 96 | const reflag = new ReflagClient({
 97 |   publishableKey: "reflag-publishable-key",
 98 |   user: { id: "42" },
 99 |   feedback: {
100 |     autoFeedbackHandler: (promptMessage, handlers) => {
101 |       // Pass your overrides here. Everything is optional
102 |       handlers.openFeedbackForm({
103 |         title: promptMessage.question,
104 | 
105 |         position: POSITION_CONFIG, // See positioning section
106 |         translations: TRANSLATION_KEYS, // See internationalization section
107 | 
108 |         // Trigger side effects with the collected data,
109 |         // for example posting it back into your own CRM
110 |         onAfterSubmit: (feedback) => {
111 |           storeFeedbackInCRM({
112 |             score: feedback.score,
113 |             comment: feedback.comment,
114 |           });
115 |         },
116 |       });
117 |     },
118 |   },
119 | });
120 | ```
121 | 
122 | See also:
123 | 
124 | - [Positioning and behavior](#positioning-and-behavior) for the position option.
125 | - [Runtime language configuration](#runtime-language-configuration) if you want
126 |   to translate the feedback UI.
127 | - [Use your own UI to collect feedback](#using-your-own-ui-to-collect-feedback) if
128 |   the feedback UI doesn't match your design.
129 | 
130 | ## Manual feedback collection
131 | 
132 | To open up the feedback collection UI, call `reflagClient.requestFeedback(options)`
133 | with the appropriate options. This approach is particularly beneficial if you wish
134 | to retain manual control over feedback collection from your users while leveraging
135 | the convenience of the Reflag feedback UI to reduce the amount of code you need
136 | to maintain.
137 | 
138 | Examples of this could be if you want the click of a `give us feedback`-button
139 | or the end of a specific user flow, to trigger a pop-up displaying the feedback
140 | user interface.
141 | 
142 | ### reflagClient.requestFeedback() options
143 | 
144 | Minimal usage with defaults:
145 | 
146 | ```javascript
147 | reflagClient.requestFeedback({
148 |   flagKey: "reflag-flag-key",
149 |   title: "How satisfied are you with file uploads?",
150 | });
151 | ```
152 | 
153 | All options:
154 | 
155 | ```javascript
156 | reflagClient.requestFeedback({
157 |   flagKey: "reflag-flag-key", // [Required]
158 |   userId: "your-user-id",  // [Optional] if user persistence is
159 |                            // enabled (default in browsers),
160 |   companyId: "users-company-or-account-id", // [Optional]
161 |   title: "How satisfied are you with file uploads?" // [Optional]
162 | 
163 |   position: POSITION_CONFIG, // [Optional] see the positioning section
164 |   translations: TRANSLATION_KEYS // [Optional] see the internationalization section
165 | 
166 |   // [Optional] trigger side effects with the collected data,
167 |   // for example sending the feedback to your own CRM
168 |   onAfterSubmit: (feedback) => {
169 |     storeFeedbackInCRM({
170 |       score: feedback.score,
171 |       comment: feedback.comment
172 |     })
173 |   }
174 | })
175 | ```
176 | 
177 | See also:
178 | 
179 | - [Positioning and behavior](#positioning-and-behavior) for the position option.
180 | - [Runtime language configuration](#runtime-language-configuration) if
181 |   you want to translate the feedback UI.
182 | 
183 | ## Positioning and behavior
184 | 
185 | The feedback UI can be configured to be placed and behave in 3 different ways:
186 | 
187 | ### Positioning configuration
188 | 
189 | #### Modal
190 | 
191 | A modal overlay with a backdrop that blocks interaction with the underlying
192 | page. It can be dismissed with the keyboard shortcut `<ESC>` or the dedicated
193 | close button in the top right corner. It is always centered on the page, capturing
194 | focus, and making it the primary interface the user needs to interact with.
195 | 
196 | ![image](https://github.com/reflagcom/javascript/assets/331790/6c6efbd3-cf7d-4d5b-b126-7ac978b2e512)
197 | 
198 | Using a modal is the strongest possible push for feedback. You are interrupting the
199 | user's normal flow, which can cause annoyance. A good use-case for the modal is
200 | when the user finishes a linear flow that they don't perform often, for example
201 | setting up a new account.
202 | 
203 | ```javascript
204 | position: {
205 |   type: "MODAL";
206 | }
207 | ```
208 | 
209 | #### Dialog
210 | 
211 | A dialog that appears in a specified corner of the viewport, without limiting the
212 | user's interaction with the rest of the page. It can be dismissed with the dedicated
213 | close button, but will automatically disappear after a short time period if the user
214 | does not interact with it.
215 | 
216 | ![image](https://github.com/reflagcom/javascript/assets/331790/30413513-fd5f-4a2c-852a-9b074fa4666c)
217 | 
218 | Using a dialog is a soft push for feedback. It lets the user continue their work
219 | with a minimal amount of intrusion. The user can opt-in to respond but is not
220 | required to. A good use case for this behavior is when a user uses a flag where
221 | the expected outcome is predictable, possibly because they have used it multiple
222 | times before. For example: Uploading a file, switching to a different view of a
223 | visualization, visiting a specific page, or manipulating some data.
224 | 
225 | The default feedback UI behavior is a dialog placed in the bottom right corner of
226 | the viewport.
227 | 
228 | ```typescript
229 | position: {
230 |   type: "DIALOG";
231 |   placement: "top-left" | "top-right" | "bottom-left" | "bottom-right";
232 |   offset?: {
233 |     x?: string | number; // e.g. "-5rem", "10px" or 10 (pixels)
234 |     y?: string | number;
235 |   }
236 | }
237 | ```
238 | 
239 | #### Popover
240 | 
241 | A popover that is anchored relative to a DOM-element (typically a button). It can
242 | be dismissed by clicking outside the popover or by pressing the dedicated close button.
243 | 
244 | ![image](https://github.com/reflagcom/javascript/assets/331790/4c5c5597-9ed3-4d4d-90c0-950926d0d967)
245 | 
246 | You can use the popover mode to implement your own button to collect feedback manually.
247 | 
248 | ```typescript
249 | type Position = {
250 |   type: "POPOVER";
251 |   anchor: DOMElement;
252 | };
253 | ```
254 | 
255 | Popover feedback button example:
256 | 
257 | ```html
258 | <button id="feedbackButton">Tell us what you think</button>
259 | <script>
260 |   const button = document.getElementById("feedbackButton");
261 |   button.addEventListener("click", (e) => {
262 |     reflagClient.requestFeedback({
263 |       flagKey: "reflag-flag-key",
264 |       userId: "your-user-id",
265 |       title: "How do you like the popover?",
266 |       position: {
267 |         type: "POPOVER",
268 |         anchor: e.currentTarget,
269 |       },
270 |     });
271 |   });
272 | </script>
273 | ```
274 | 
275 | ## Internationalization (i18n)
276 | 
277 | By default, the feedback UI is written in English. However, you can supply your own
278 | translations by passing an object in the options to either or both of the
279 | `new ReflagClient(options)` or `reflagClient.requestFeedback(options)` calls.
280 | These translations will replace the English ones used by the feedback interface.
281 | See examples below.
282 | 
283 | ![image](https://github.com/reflagcom/javascript/assets/331790/68805b38-e9f6-4de5-9f55-188216983e3c)
284 | 
285 | See [default English localization keys](https://github.com/reflagcom/javascript/tree/main/packages/browser-sdk/src/feedback/ui/config/defaultTranslations.tsx)
286 | for a reference of what translation keys can be supplied.
287 | 
288 | ### Static language configuration
289 | 
290 | If you know the language at page load, you can configure your translation keys while
291 | initializing the Reflag Browser SDK:
292 | 
293 | ```typescript
294 | new ReflagClient({
295 |   publishableKey: "my-publishable-key",
296 |   feedback: {
297 |     ui: {
298 |       translations: {
299 |         DefaultQuestionLabel:
300 |           "Dans quelle mesure êtes-vous satisfait de cette fonctionnalité ?",
301 |         QuestionPlaceholder:
302 |           "Comment pouvons-nous améliorer cette fonctionnalité ?",
303 |         ScoreStatusDescription: "Choisissez une note et laissez un commentaire",
304 |         ScoreStatusLoading: "Chargement...",
305 |         ScoreStatusReceived: "La note a été reçue !",
306 |         ScoreVeryDissatisfiedLabel: "Très insatisfait",
307 |         ScoreDissatisfiedLabel: "Insatisfait",
308 |         ScoreNeutralLabel: "Neutre",
309 |         ScoreSatisfiedLabel: "Satisfait",
310 |         ScoreVerySatisfiedLabel: "Très satisfait",
311 |         SuccessMessage: "Merci d'avoir envoyé vos commentaires!",
312 |         SendButton: "Envoyer",
313 |       },
314 |     },
315 |   },
316 | });
317 | ```
318 | 
319 | ### Runtime language configuration
320 | 
321 | If you only know the user's language after the page has loaded, you can provide
322 | translations to either the `reflagClient.requestFeedback(options)` call or
323 | the `autoFeedbackHandler` option before the feedback interface opens.
324 | See examples below.
325 | 
326 | ```typescript
327 | reflagClient.requestFeedback({
328 |   ... // Other options
329 |   translations: {
330 |     // your translation keys
331 |   }
332 | })
333 | ```
334 | 
335 | ### Translations
336 | 
337 | When you are collecting feedback through the Reflag automation, you can intercept
338 | the default prompt handling and override the defaults.
339 | 
340 | If you set the prompt question in the Reflag app to be one of your own translation
341 | keys, you can even get a translated version of the question you want to ask your
342 | customer in the feedback UI.
343 | 
344 | ```javascript
345 | new ReflagClient({
346 |   publishableKey: "reflag-publishable-key",
347 |   feedback: {
348 |     autoFeedbackHandler: (message, handlers) => {
349 |       const translatedQuestion =
350 |         i18nLookup[message.question] ?? message.question;
351 |       handlers.openFeedbackForm({
352 |         title: translatedQuestion,
353 |         translations: {
354 |           // your static translation keys
355 |         },
356 |       });
357 |     },
358 |   },
359 | });
360 | ```
361 | 
362 | ## Custom styling
363 | 
364 | You can adapt parts of the look of the Reflag feedback UI by applying CSS custom
365 | properties to your page in your CSS `:root`-scope.
366 | 
367 | For example, a dark mode theme might look like this:
368 | 
369 | ![image](https://github.com/reflagcom/javascript/assets/34348/5d579b7b-a830-4530-8b40-864488a8597e)
370 | 
371 | ```css
372 | :root {
373 |   --reflag-feedback-dialog-background-color: #1e1f24;
374 |   --reflag-feedback-dialog-color: rgba(255, 255, 255, 0.92);
375 |   --reflag-feedback-dialog-secondary-color: rgba(255, 255, 255, 0.3);
376 |   --reflag-feedback-dialog-border: rgba(255, 255, 255, 0.16);
377 |   --reflag-feedback-dialog-primary-button-background-color: #655bfa;
378 |   --reflag-feedback-dialog-primary-button-color: white;
379 |   --reflag-feedback-dialog-input-border-color: rgba(255, 255, 255, 0.16);
380 |   --reflag-feedback-dialog-input-focus-border-color: rgba(255, 255, 255, 0.3);
381 |   --reflag-feedback-dialog-error-color: #f56565;
382 | 
383 |   --reflag-feedback-dialog-rating-1-color: #ed8936;
384 |   --reflag-feedback-dialog-rating-1-background-color: #7b341e;
385 |   --reflag-feedback-dialog-rating-2-color: #dd6b20;
386 |   --reflag-feedback-dialog-rating-2-background-color: #652b19;
387 |   --reflag-feedback-dialog-rating-3-color: #787c91;
388 |   --reflag-feedback-dialog-rating-3-background-color: #3e404c;
389 |   --reflag-feedback-dialog-rating-4-color: #38a169;
390 |   --reflag-feedback-dialog-rating-4-background-color: #1c4532;
391 |   --reflag-feedback-dialog-rating-5-color: #48bb78;
392 |   --reflag-feedback-dialog-rating-5-background-color: #22543d;
393 | 
394 |   --reflag-feedback-dialog-submitted-check-background-color: #38a169;
395 |   --reflag-feedback-dialog-submitted-check-color: #ffffff;
396 | }
397 | ```
398 | 
399 | Other examples of custom styling can be found in our [development example style-sheet](https://github.com/reflagcom/javascript/tree/main/packages/browser-sdk/src/feedback/ui/index.css).
400 | 
401 | ## Using your own UI to collect feedback
402 | 
403 | You may have very strict design guidelines for your app and maybe the Reflag feedback
404 | UI doesn't quite work for you. In this case, you can implement your own feedback
405 | collection mechanism, which follows your own design guidelines. This is the data
406 | type you need to collect:
407 | 
408 | ```typescript
409 | type DataToCollect = {
410 |   // Customer satisfaction score
411 |   score?: 1 | 2 | 3 | 4 | 5;
412 | 
413 |   // The comment.
414 |   comment?: string;
415 | };
416 | ```
417 | 
418 | Either `score` or `comment` must be defined in order to pass validation in the
419 | Reflag API.
420 | 
421 | ### Manual feedback collection with custom UI
422 | 
423 | Examples of a HTML-form that collects the relevant data can be found
424 | in [feedback.html](https://github.com/reflagcom/javascript/tree/main/packages/browser-sdk/example/feedback/feedback.html) and [feedback.jsx](https://github.com/reflagcom/javascript/tree/main/packages/browser-sdk/example/feedback/Feedback.jsx).
425 | 
426 | Once you have collected the feedback data, pass it along to `reflagClient.feedback()`:
427 | 
428 | ```javascript
429 | reflagClient.feedback({
430 |   flagKey: "reflag-flag-key",
431 |   userId: "your-user-id",
432 |   score: 5,
433 |   comment: "Best thing I've ever tried!",
434 | });
435 | ```
436 | 
437 | ### Intercepting automated feedback survey events
438 | 
439 | When using automated feedback surveys, the Reflag service will, when specified,
440 | send a feedback prompt message to your user's instance of the Reflag Browser SDK.
441 | This will result in the feedback UI being opened.
442 | 
443 | You can intercept this behavior and open your own custom feedback collection form:
444 | 
445 | ```typescript
446 | new ReflagClient({
447 |   publishableKey: "reflag-publishable-key",
448 |   feedback: {
449 |     autoFeedbackHandler: async (promptMessage, handlers) => {
450 |       // This opens your custom UI
451 |       customFeedbackCollection({
452 |         // The question configured in the Reflag UI for the flag
453 |         question: promptMessage.question,
454 |         // When the user successfully submits feedback data.
455 |         // Use this instead of `reflagClient.feedback()`, otherwise
456 |         // the feedback prompt handler will keep being called
457 |         // with the same prompt message
458 |         onFeedbackSubmitted: (feedback) => {
459 |           handlers.reply(feedback);
460 |         },
461 |         // When the user closes the custom feedback form
462 |         // without leaving any response.
463 |         // It is important to feed this back, otherwise
464 |         // the feedback prompt handler will keep being called
465 |         // with the same prompt message
466 |         onFeedbackDismissed: () => {
467 |           handlers.reply(null);
468 |         },
469 |       });
470 |     },
471 |   },
472 | });
473 | ```
474 | 
```

--------------------------------------------------------------------------------
/sdk/@reflag/vue-sdk/globals.md:
--------------------------------------------------------------------------------

```markdown
   1 | ---
   2 | layout:
   3 |   visible: true
   4 | title:
   5 |   visible: true
   6 | description:
   7 |   visible: false
   8 | tableOfContents:
   9 |   visible: true
  10 | outline:
  11 |   visible: true
  12 | pagination:
  13 |   visible: true
  14 | ---
  15 | 
  16 | # @reflag/vue-sdk
  17 | 
  18 | ## Interfaces
  19 | 
  20 | ### CheckEvent
  21 | 
  22 | Event representing checking the flag evaluation result
  23 | 
  24 | #### Properties
  25 | 
  26 | <table>
  27 | <thead>
  28 | <tr>
  29 | <th>Property</th>
  30 | <th>Type</th>
  31 | <th>Description</th>
  32 | </tr>
  33 | </thead>
  34 | <tbody>
  35 | <tr>
  36 | <td>
  37 | 
  38 | <a id="action"></a> `action`
  39 | 
  40 | </td>
  41 | <td>
  42 | 
  43 | `"check-is-enabled"` \| `"check-config"`
  44 | 
  45 | </td>
  46 | <td>
  47 | 
  48 | `check-is-enabled` means `isEnabled` was checked, `check-config` means `config` was checked.
  49 | 
  50 | </td>
  51 | </tr>
  52 | <tr>
  53 | <td>
  54 | 
  55 | <a id="key"></a> `key`
  56 | 
  57 | </td>
  58 | <td>
  59 | 
  60 | `string`
  61 | 
  62 | </td>
  63 | <td>
  64 | 
  65 | Flag key.
  66 | 
  67 | </td>
  68 | </tr>
  69 | <tr>
  70 | <td>
  71 | 
  72 | <a id="missingcontextfields"></a> `missingContextFields?`
  73 | 
  74 | </td>
  75 | <td>
  76 | 
  77 | `string`[]
  78 | 
  79 | </td>
  80 | <td>
  81 | 
  82 | Missing context fields.
  83 | 
  84 | </td>
  85 | </tr>
  86 | <tr>
  87 | <td>
  88 | 
  89 | <a id="ruleevaluationresults"></a> `ruleEvaluationResults?`
  90 | 
  91 | </td>
  92 | <td>
  93 | 
  94 | `boolean`[]
  95 | 
  96 | </td>
  97 | <td>
  98 | 
  99 | Rule evaluation results.
 100 | 
 101 | </td>
 102 | </tr>
 103 | <tr>
 104 | <td>
 105 | 
 106 | <a id="value"></a> `value?`
 107 | 
 108 | </td>
 109 | <td>
 110 | 
 111 |  \| `boolean` \| \{ `key`: `string`; `payload`: `any`; \}
 112 | 
 113 | </td>
 114 | <td>
 115 | 
 116 | Result of flag or configuration evaluation.
 117 | If `action` is `check-is-enabled`, this is the result of the flag evaluation and `value` is a boolean.
 118 | If `action` is `check-config`, this is the result of the configuration evaluation.
 119 | 
 120 | </td>
 121 | </tr>
 122 | <tr>
 123 | <td>
 124 | 
 125 | <a id="version"></a> `version?`
 126 | 
 127 | </td>
 128 | <td>
 129 | 
 130 | `number`
 131 | 
 132 | </td>
 133 | <td>
 134 | 
 135 | Version of targeting rules.
 136 | 
 137 | </td>
 138 | </tr>
 139 | </tbody>
 140 | </table>
 141 | 
 142 | ***
 143 | 
 144 | ### CompanyContext
 145 | 
 146 | Context is a set of key-value pairs.
 147 | This is used to determine if feature targeting matches and to track events.
 148 | Id should always be present so that it can be referenced to an existing company.
 149 | 
 150 | #### Indexable
 151 | 
 152 | ```ts
 153 | [key: string]: undefined | string | number
 154 | ```
 155 | 
 156 | #### Properties
 157 | 
 158 | <table>
 159 | <thead>
 160 | <tr>
 161 | <th>Property</th>
 162 | <th>Type</th>
 163 | <th>Description</th>
 164 | </tr>
 165 | </thead>
 166 | <tbody>
 167 | <tr>
 168 | <td>
 169 | 
 170 | <a id="id"></a> `id`
 171 | 
 172 | </td>
 173 | <td>
 174 | 
 175 | `undefined` \| `string` \| `number`
 176 | 
 177 | </td>
 178 | <td>
 179 | 
 180 | Company id
 181 | 
 182 | </td>
 183 | </tr>
 184 | <tr>
 185 | <td>
 186 | 
 187 | <a id="name"></a> `name?`
 188 | 
 189 | </td>
 190 | <td>
 191 | 
 192 | `string`
 193 | 
 194 | </td>
 195 | <td>
 196 | 
 197 | Company name
 198 | 
 199 | </td>
 200 | </tr>
 201 | </tbody>
 202 | </table>
 203 | 
 204 | ***
 205 | 
 206 | ### Flag\<TConfig\>
 207 | 
 208 | #### Type Parameters
 209 | 
 210 | <table>
 211 | <thead>
 212 | <tr>
 213 | <th>Type Parameter</th>
 214 | <th>Default type</th>
 215 | </tr>
 216 | </thead>
 217 | <tbody>
 218 | <tr>
 219 | <td>
 220 | 
 221 | `TConfig` *extends* [`FlagType`](globals.md#flagtype)\[`"config"`\]
 222 | 
 223 | </td>
 224 | <td>
 225 | 
 226 | [`EmptyFlagRemoteConfig`](globals.md#emptyflagremoteconfig)
 227 | 
 228 | </td>
 229 | </tr>
 230 | </tbody>
 231 | </table>
 232 | 
 233 | #### Properties
 234 | 
 235 | <table>
 236 | <thead>
 237 | <tr>
 238 | <th>Property</th>
 239 | <th>Type</th>
 240 | </tr>
 241 | </thead>
 242 | <tbody>
 243 | <tr>
 244 | <td>
 245 | 
 246 | <a id="config"></a> `config`
 247 | 
 248 | </td>
 249 | <td>
 250 | 
 251 | `Ref`\< \| [`EmptyFlagRemoteConfig`](globals.md#emptyflagremoteconfig) \| \{ `key`: `string`; \} & `TConfig`, \| [`EmptyFlagRemoteConfig`](globals.md#emptyflagremoteconfig) \| \{ `key`: `string`; \} & `TConfig`\>
 252 | 
 253 | </td>
 254 | </tr>
 255 | <tr>
 256 | <td>
 257 | 
 258 | <a id="isenabled"></a> `isEnabled`
 259 | 
 260 | </td>
 261 | <td>
 262 | 
 263 | `Ref`\<`boolean`, `boolean`\>
 264 | 
 265 | </td>
 266 | </tr>
 267 | <tr>
 268 | <td>
 269 | 
 270 | <a id="isloading"></a> `isLoading`
 271 | 
 272 | </td>
 273 | <td>
 274 | 
 275 | `Ref`\<`boolean`, `boolean`\>
 276 | 
 277 | </td>
 278 | </tr>
 279 | <tr>
 280 | <td>
 281 | 
 282 | <a id="key-1"></a> `key`
 283 | 
 284 | </td>
 285 | <td>
 286 | 
 287 | `string`
 288 | 
 289 | </td>
 290 | </tr>
 291 | <tr>
 292 | <td>
 293 | 
 294 | <a id="requestfeedback"></a> `requestFeedback`
 295 | 
 296 | </td>
 297 | <td>
 298 | 
 299 | (`opts`: [`RequestFlagFeedbackOptions`](globals.md#requestflagfeedbackoptions)) => `void`
 300 | 
 301 | </td>
 302 | </tr>
 303 | </tbody>
 304 | </table>
 305 | 
 306 | #### Methods
 307 | 
 308 | ##### track()
 309 | 
 310 | ```ts
 311 | track(): 
 312 |   | undefined
 313 |   | Promise<
 314 |   | undefined
 315 | | Response>
 316 | ```
 317 | 
 318 | ###### Returns
 319 | 
 320 |   \| `undefined`
 321 |   \| [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<
 322 |   \| `undefined`
 323 |   \| [`Response`](https://developer.mozilla.org/docs/Web/API/Response)\>
 324 | 
 325 | ***
 326 | 
 327 | ### Flags
 328 | 
 329 | ***
 330 | 
 331 | ### UserContext
 332 | 
 333 | Context is a set of key-value pairs.
 334 | This is used to determine if feature targeting matches and to track events.
 335 | Id should always be present so that it can be referenced to an existing user.
 336 | 
 337 | #### Indexable
 338 | 
 339 | ```ts
 340 | [key: string]: undefined | string | number
 341 | ```
 342 | 
 343 | #### Properties
 344 | 
 345 | <table>
 346 | <thead>
 347 | <tr>
 348 | <th>Property</th>
 349 | <th>Type</th>
 350 | <th>Description</th>
 351 | </tr>
 352 | </thead>
 353 | <tbody>
 354 | <tr>
 355 | <td>
 356 | 
 357 | <a id="email"></a> `email?`
 358 | 
 359 | </td>
 360 | <td>
 361 | 
 362 | `string`
 363 | 
 364 | </td>
 365 | <td>
 366 | 
 367 | User email
 368 | 
 369 | </td>
 370 | </tr>
 371 | <tr>
 372 | <td>
 373 | 
 374 | <a id="id-1"></a> `id`
 375 | 
 376 | </td>
 377 | <td>
 378 | 
 379 | `undefined` \| `string` \| `number`
 380 | 
 381 | </td>
 382 | <td>
 383 | 
 384 | User id
 385 | 
 386 | </td>
 387 | </tr>
 388 | <tr>
 389 | <td>
 390 | 
 391 | <a id="name-1"></a> `name?`
 392 | 
 393 | </td>
 394 | <td>
 395 | 
 396 | `string`
 397 | 
 398 | </td>
 399 | <td>
 400 | 
 401 | User name
 402 | 
 403 | </td>
 404 | </tr>
 405 | </tbody>
 406 | </table>
 407 | 
 408 | ## Type Aliases
 409 | 
 410 | ### BootstrappedFlags
 411 | 
 412 | ```ts
 413 | type BootstrappedFlags = {
 414 |   context: ReflagContext;
 415 |   flags: RawFlags;
 416 | };
 417 | ```
 418 | 
 419 | #### Type declaration
 420 | 
 421 | <table>
 422 | <thead>
 423 | <tr>
 424 | <th>Name</th>
 425 | <th>Type</th>
 426 | </tr>
 427 | </thead>
 428 | <tbody>
 429 | <tr>
 430 | <td>
 431 | 
 432 | <a id="context"></a> `context`
 433 | 
 434 | </td>
 435 | <td>
 436 | 
 437 | [`ReflagContext`](../browser-sdk/globals.md#reflagcontext)
 438 | 
 439 | </td>
 440 | </tr>
 441 | <tr>
 442 | <td>
 443 | 
 444 | <a id="flags-1"></a> `flags`
 445 | 
 446 | </td>
 447 | <td>
 448 | 
 449 | [`RawFlags`](../browser-sdk/globals.md#rawflags)
 450 | 
 451 | </td>
 452 | </tr>
 453 | </tbody>
 454 | </table>
 455 | 
 456 | ***
 457 | 
 458 | ### EmptyFlagRemoteConfig
 459 | 
 460 | ```ts
 461 | type EmptyFlagRemoteConfig = {
 462 |   key: undefined;
 463 |   payload: undefined;
 464 | };
 465 | ```
 466 | 
 467 | #### Type declaration
 468 | 
 469 | <table>
 470 | <thead>
 471 | <tr>
 472 | <th>Name</th>
 473 | <th>Type</th>
 474 | </tr>
 475 | </thead>
 476 | <tbody>
 477 | <tr>
 478 | <td>
 479 | 
 480 | <a id="key-2"></a> `key`
 481 | 
 482 | </td>
 483 | <td>
 484 | 
 485 | `undefined`
 486 | 
 487 | </td>
 488 | </tr>
 489 | <tr>
 490 | <td>
 491 | 
 492 | <a id="payload"></a> `payload`
 493 | 
 494 | </td>
 495 | <td>
 496 | 
 497 | `undefined`
 498 | 
 499 | </td>
 500 | </tr>
 501 | </tbody>
 502 | </table>
 503 | 
 504 | ***
 505 | 
 506 | ### FlagType
 507 | 
 508 | ```ts
 509 | type FlagType = {
 510 |   config: {
 511 |      payload: any;
 512 |     };
 513 | };
 514 | ```
 515 | 
 516 | #### Type declaration
 517 | 
 518 | <table>
 519 | <thead>
 520 | <tr>
 521 | <th>Name</th>
 522 | <th>Type</th>
 523 | </tr>
 524 | </thead>
 525 | <tbody>
 526 | <tr>
 527 | <td>
 528 | 
 529 | <a id="config-1"></a> `config`?
 530 | 
 531 | </td>
 532 | <td>
 533 | 
 534 | \{
 535 |   `payload`: `any`;
 536 |  \}
 537 | 
 538 | </td>
 539 | </tr>
 540 | <tr>
 541 | <td>
 542 | 
 543 | `config.payload`
 544 | 
 545 | </td>
 546 | <td>
 547 | 
 548 | `any`
 549 | 
 550 | </td>
 551 | </tr>
 552 | </tbody>
 553 | </table>
 554 | 
 555 | ***
 556 | 
 557 | ### ReflagBaseProps
 558 | 
 559 | ```ts
 560 | type ReflagBaseProps = {
 561 |   debug: boolean;
 562 |   initialLoading: boolean;
 563 | };
 564 | ```
 565 | 
 566 | **`Internal`**
 567 | 
 568 | Base props for the ReflagProvider and ReflagBootstrappedProvider.
 569 | 
 570 | #### Type declaration
 571 | 
 572 | <table>
 573 | <thead>
 574 | <tr>
 575 | <th>Name</th>
 576 | <th>Type</th>
 577 | <th>Description</th>
 578 | </tr>
 579 | </thead>
 580 | <tbody>
 581 | <tr>
 582 | <td>
 583 | 
 584 | <a id="debug"></a> `debug`?
 585 | 
 586 | </td>
 587 | <td>
 588 | 
 589 | `boolean`
 590 | 
 591 | </td>
 592 | <td>
 593 | 
 594 | Set to `true` to enable debug logging to the console.
 595 | 
 596 | </td>
 597 | </tr>
 598 | <tr>
 599 | <td>
 600 | 
 601 | <a id="initialloading"></a> `initialLoading`?
 602 | 
 603 | </td>
 604 | <td>
 605 | 
 606 | `boolean`
 607 | 
 608 | </td>
 609 | <td>
 610 | 
 611 | Set to `true` to show the loading component while the client is initializing.
 612 | 
 613 | </td>
 614 | </tr>
 615 | </tbody>
 616 | </table>
 617 | 
 618 | ***
 619 | 
 620 | ### ReflagBootstrappedProps
 621 | 
 622 | ```ts
 623 | type ReflagBootstrappedProps = ReflagInitOptionsBase & ReflagBaseProps & {
 624 |   flags: BootstrappedFlags;
 625 | };
 626 | ```
 627 | 
 628 | Props for the ReflagBootstrappedProvider.
 629 | 
 630 | #### Type declaration
 631 | 
 632 | <table>
 633 | <thead>
 634 | <tr>
 635 | <th>Name</th>
 636 | <th>Type</th>
 637 | <th>Description</th>
 638 | </tr>
 639 | </thead>
 640 | <tbody>
 641 | <tr>
 642 | <td>
 643 | 
 644 | `flags`
 645 | 
 646 | </td>
 647 | <td>
 648 | 
 649 | [`BootstrappedFlags`](globals.md#bootstrappedflags)
 650 | 
 651 | </td>
 652 | <td>
 653 | 
 654 | Pre-fetched flags to be used instead of fetching them from the server.
 655 | 
 656 | </td>
 657 | </tr>
 658 | </tbody>
 659 | </table>
 660 | 
 661 | ***
 662 | 
 663 | ### ReflagClientProviderProps
 664 | 
 665 | ```ts
 666 | type ReflagClientProviderProps = Omit<ReflagBaseProps, "debug"> & {
 667 |   client: ReflagClient;
 668 | };
 669 | ```
 670 | 
 671 | Props for the ReflagClientProvider.
 672 | 
 673 | #### Type declaration
 674 | 
 675 | <table>
 676 | <thead>
 677 | <tr>
 678 | <th>Name</th>
 679 | <th>Type</th>
 680 | <th>Description</th>
 681 | </tr>
 682 | </thead>
 683 | <tbody>
 684 | <tr>
 685 | <td>
 686 | 
 687 | `client`
 688 | 
 689 | </td>
 690 | <td>
 691 | 
 692 | [`ReflagClient`](../browser-sdk/globals.md#reflagclient)
 693 | 
 694 | </td>
 695 | <td>
 696 | 
 697 | A pre-initialized ReflagClient to use.
 698 | 
 699 | </td>
 700 | </tr>
 701 | </tbody>
 702 | </table>
 703 | 
 704 | ***
 705 | 
 706 | ### ReflagInitOptionsBase
 707 | 
 708 | ```ts
 709 | type ReflagInitOptionsBase = Omit<InitOptions, "user" | "company" | "other" | "otherContext" | "bootstrappedFlags">;
 710 | ```
 711 | 
 712 | **`Internal`**
 713 | 
 714 | Base init options for the ReflagProvider and ReflagBootstrappedProvider.
 715 | 
 716 | ***
 717 | 
 718 | ### ReflagProps
 719 | 
 720 | ```ts
 721 | type ReflagProps = ReflagInitOptionsBase & ReflagBaseProps & {
 722 |   company: CompanyContext;
 723 |   context: ReflagContext;
 724 |   otherContext: Record<string, string | number | undefined>;
 725 |   user: UserContext;
 726 | };
 727 | ```
 728 | 
 729 | Props for the ReflagProvider.
 730 | 
 731 | #### Type declaration
 732 | 
 733 | <table>
 734 | <thead>
 735 | <tr>
 736 | <th>Name</th>
 737 | <th>Type</th>
 738 | <th>Description</th>
 739 | </tr>
 740 | </thead>
 741 | <tbody>
 742 | <tr>
 743 | <td>
 744 | 
 745 | `company`?
 746 | 
 747 | </td>
 748 | <td>
 749 | 
 750 | [`CompanyContext`](globals.md#companycontext)
 751 | 
 752 | </td>
 753 | <td>
 754 | 
 755 | Company related context. If you provide `id` Reflag will enrich the evaluation context with
 756 | company attributes on Reflag servers.
 757 | 
 758 | **Deprecated**
 759 | 
 760 | Use `context` instead, this property will be removed in the next major version
 761 | 
 762 | </td>
 763 | </tr>
 764 | <tr>
 765 | <td>
 766 | 
 767 | `context`?
 768 | 
 769 | </td>
 770 | <td>
 771 | 
 772 | [`ReflagContext`](../browser-sdk/globals.md#reflagcontext)
 773 | 
 774 | </td>
 775 | <td>
 776 | 
 777 | The context to use for the ReflagClient containing user, company, and other context.
 778 | 
 779 | </td>
 780 | </tr>
 781 | <tr>
 782 | <td>
 783 | 
 784 | `otherContext`?
 785 | 
 786 | </td>
 787 | <td>
 788 | 
 789 | [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)\<`string`, `string` \| `number` \| `undefined`\>
 790 | 
 791 | </td>
 792 | <td>
 793 | 
 794 | Context which is not related to a user or a company.
 795 | 
 796 | **Deprecated**
 797 | 
 798 | Use `context` instead, this property will be removed in the next major version
 799 | 
 800 | </td>
 801 | </tr>
 802 | <tr>
 803 | <td>
 804 | 
 805 | `user`?
 806 | 
 807 | </td>
 808 | <td>
 809 | 
 810 | [`UserContext`](globals.md#usercontext)
 811 | 
 812 | </td>
 813 | <td>
 814 | 
 815 | User related context. If you provide `id` Reflag will enrich the evaluation context with
 816 | user attributes on Reflag servers.
 817 | 
 818 | **Deprecated**
 819 | 
 820 | Use `context` instead, this property will be removed in the next major version
 821 | 
 822 | </td>
 823 | </tr>
 824 | </tbody>
 825 | </table>
 826 | 
 827 | ***
 828 | 
 829 | ### RequestFlagFeedbackOptions
 830 | 
 831 | ```ts
 832 | type RequestFlagFeedbackOptions = Omit<RequestFeedbackData, "flagKey" | "featureId">;
 833 | ```
 834 | 
 835 | ***
 836 | 
 837 | ### TrackEvent
 838 | 
 839 | ```ts
 840 | type TrackEvent = {
 841 |   attributes:   | Record<string, any>
 842 |      | null;
 843 |   company: CompanyContext;
 844 |   eventName: string;
 845 |   user: UserContext;
 846 | };
 847 | ```
 848 | 
 849 | #### Type declaration
 850 | 
 851 | <table>
 852 | <thead>
 853 | <tr>
 854 | <th>Name</th>
 855 | <th>Type</th>
 856 | </tr>
 857 | </thead>
 858 | <tbody>
 859 | <tr>
 860 | <td>
 861 | 
 862 | <a id="attributes"></a> `attributes`?
 863 | 
 864 | </td>
 865 | <td>
 866 | 
 867 |   \| [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)\<`string`, `any`\>
 868 |   \| `null`
 869 | 
 870 | </td>
 871 | </tr>
 872 | <tr>
 873 | <td>
 874 | 
 875 | <a id="company"></a> `company`?
 876 | 
 877 | </td>
 878 | <td>
 879 | 
 880 | [`CompanyContext`](globals.md#companycontext)
 881 | 
 882 | </td>
 883 | </tr>
 884 | <tr>
 885 | <td>
 886 | 
 887 | <a id="eventname"></a> `eventName`
 888 | 
 889 | </td>
 890 | <td>
 891 | 
 892 | `string`
 893 | 
 894 | </td>
 895 | </tr>
 896 | <tr>
 897 | <td>
 898 | 
 899 | <a id="user"></a> `user`
 900 | 
 901 | </td>
 902 | <td>
 903 | 
 904 | [`UserContext`](globals.md#usercontext)
 905 | 
 906 | </td>
 907 | </tr>
 908 | </tbody>
 909 | </table>
 910 | 
 911 | ***
 912 | 
 913 | ### TypedFlags
 914 | 
 915 | ```ts
 916 | type TypedFlags = keyof Flags extends never ? Record<string, Flag> : { [TypedFlagKey in keyof Flags]: Flags[TypedFlagKey] extends FlagType ? Flag<Flags[TypedFlagKey]["config"]> : Flag };
 917 | ```
 918 | 
 919 | ## Variables
 920 | 
 921 | ### default
 922 | 
 923 | ```ts
 924 | default: {
 925 |   install: void;
 926 | };
 927 | ```
 928 | 
 929 | #### Type declaration
 930 | 
 931 | <table>
 932 | <thead>
 933 | <tr>
 934 | <th>Name</th>
 935 | <th>Type</th>
 936 | </tr>
 937 | </thead>
 938 | <tbody>
 939 | <tr>
 940 | <td>
 941 | 
 942 | <a id="install"></a> `install()`
 943 | 
 944 | </td>
 945 | <td>
 946 | 
 947 | `void`
 948 | 
 949 | </td>
 950 | </tr>
 951 | </tbody>
 952 | </table>
 953 | 
 954 | ***
 955 | 
 956 | ### ReflagBootstrappedProvider
 957 | 
 958 | ```ts
 959 | const ReflagBootstrappedProvider: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
 960 | ```
 961 | 
 962 | ## Functions
 963 | 
 964 | ### useClient()
 965 | 
 966 | ```ts
 967 | function useClient(): ReflagClient
 968 | ```
 969 | 
 970 | Vue composable for getting the Reflag client.
 971 | 
 972 | This composable returns the Reflag client. You can use this to get the Reflag
 973 | client at any point in your application.
 974 | 
 975 | #### Returns
 976 | 
 977 | [`ReflagClient`](../browser-sdk/globals.md#reflagclient)
 978 | 
 979 | The Reflag client.
 980 | 
 981 | #### Example
 982 | 
 983 | ```ts
 984 | import { useClient } from '@reflag/vue-sdk';
 985 | 
 986 | const client = useClient();
 987 | 
 988 | console.log(client.getContext());
 989 | ```
 990 | 
 991 | ***
 992 | 
 993 | ### useFlag()
 994 | 
 995 | ```ts
 996 | function useFlag<TKey>(key: TKey): TypedFlags[TKey]
 997 | ```
 998 | 
 999 | Vue composable for getting the state of a given flag for the current context.
1000 | 
1001 | This composable returns an object with the state of the flag for the current context.
1002 | 
1003 | #### Type Parameters
1004 | 
1005 | <table>
1006 | <thead>
1007 | <tr>
1008 | <th>Type Parameter</th>
1009 | </tr>
1010 | </thead>
1011 | <tbody>
1012 | <tr>
1013 | <td>
1014 | 
1015 | `TKey` *extends* `string`
1016 | 
1017 | </td>
1018 | </tr>
1019 | </tbody>
1020 | </table>
1021 | 
1022 | #### Parameters
1023 | 
1024 | <table>
1025 | <thead>
1026 | <tr>
1027 | <th>Parameter</th>
1028 | <th>Type</th>
1029 | <th>Description</th>
1030 | </tr>
1031 | </thead>
1032 | <tbody>
1033 | <tr>
1034 | <td>
1035 | 
1036 | `key`
1037 | 
1038 | </td>
1039 | <td>
1040 | 
1041 | `TKey`
1042 | 
1043 | </td>
1044 | <td>
1045 | 
1046 | The key of the flag to get the state of.
1047 | 
1048 | </td>
1049 | </tr>
1050 | </tbody>
1051 | </table>
1052 | 
1053 | #### Returns
1054 | 
1055 | [`TypedFlags`](globals.md#typedflags)\[`TKey`\]
1056 | 
1057 | An object with the state of the flag.
1058 | 
1059 | #### Example
1060 | 
1061 | ```ts
1062 | import { useFlag } from '@reflag/vue-sdk';
1063 | 
1064 | const { isEnabled, config, track, requestFeedback } = useFlag("huddles");
1065 | 
1066 | function StartHuddlesButton() {
1067 |   const { isEnabled, config: { payload }, track } = useFlag("huddles");
1068 |   if (isEnabled) {
1069 |    return <button onClick={() => track()}>{payload?.buttonTitle ?? "Start Huddles"}</button>;
1070 | }
1071 | ```
1072 | 
1073 | ***
1074 | 
1075 | ### useIsLoading()
1076 | 
1077 | ```ts
1078 | function useIsLoading(): Ref<boolean, boolean>
1079 | ```
1080 | 
1081 | Vue composable for checking if the Reflag client is loading.
1082 | 
1083 | This composable returns a boolean value that indicates whether the Reflag client is loading.
1084 | You can use this to check if the Reflag client is loading at any point in your application.
1085 | Initially, the value will be true until the client is initialized.
1086 | 
1087 | #### Returns
1088 | 
1089 | `Ref`\<`boolean`, `boolean`\>
1090 | 
1091 | #### Example
1092 | 
1093 | ```ts
1094 | import { useIsLoading } from '@reflag/vue-sdk';
1095 | 
1096 | const isLoading = useIsLoading();
1097 | 
1098 | console.log(isLoading);
1099 | ```
1100 | 
1101 | ***
1102 | 
1103 | ### useOnEvent()
1104 | 
1105 | ```ts
1106 | function useOnEvent<THookType>(
1107 |    event: THookType, 
1108 |    handler: (arg0: HookArgs[THookType]) => void, 
1109 |    client?: ReflagClient): void
1110 | ```
1111 | 
1112 | Vue composable for listening to Reflag client events.
1113 | 
1114 | #### Type Parameters
1115 | 
1116 | <table>
1117 | <thead>
1118 | <tr>
1119 | <th>Type Parameter</th>
1120 | </tr>
1121 | </thead>
1122 | <tbody>
1123 | <tr>
1124 | <td>
1125 | 
1126 | `THookType` *extends* keyof [`HookArgs`](../browser-sdk/globals.md#hookargs)
1127 | 
1128 | </td>
1129 | </tr>
1130 | </tbody>
1131 | </table>
1132 | 
1133 | #### Parameters
1134 | 
1135 | <table>
1136 | <thead>
1137 | <tr>
1138 | <th>Parameter</th>
1139 | <th>Type</th>
1140 | <th>Description</th>
1141 | </tr>
1142 | </thead>
1143 | <tbody>
1144 | <tr>
1145 | <td>
1146 | 
1147 | `event`
1148 | 
1149 | </td>
1150 | <td>
1151 | 
1152 | `THookType`
1153 | 
1154 | </td>
1155 | <td>
1156 | 
1157 | The event to listen to.
1158 | 
1159 | </td>
1160 | </tr>
1161 | <tr>
1162 | <td>
1163 | 
1164 | `handler`
1165 | 
1166 | </td>
1167 | <td>
1168 | 
1169 | (`arg0`: [`HookArgs`](../browser-sdk/globals.md#hookargs)\[`THookType`\]) => `void`
1170 | 
1171 | </td>
1172 | <td>
1173 | 
1174 | The function to call when the event is triggered.
1175 | 
1176 | </td>
1177 | </tr>
1178 | <tr>
1179 | <td>
1180 | 
1181 | `client`?
1182 | 
1183 | </td>
1184 | <td>
1185 | 
1186 | [`ReflagClient`](../browser-sdk/globals.md#reflagclient)
1187 | 
1188 | </td>
1189 | <td>
1190 | 
1191 | The Reflag client to listen to. If not provided, the client will be retrieved from the context.
1192 | 
1193 | </td>
1194 | </tr>
1195 | </tbody>
1196 | </table>
1197 | 
1198 | #### Returns
1199 | 
1200 | `void`
1201 | 
1202 | #### Example
1203 | 
1204 | ```ts
1205 | import { useOnEvent } from '@reflag/vue-sdk';
1206 | 
1207 | useOnEvent("flagsUpdated", () => {
1208 |   console.log("flags updated");
1209 | });
1210 | ```
1211 | 
1212 | ***
1213 | 
1214 | ### useRequestFeedback()
1215 | 
1216 | ```ts
1217 | function useRequestFeedback(): (options: RequestFeedbackData) => void
1218 | ```
1219 | 
1220 | Vue composable for requesting user feedback.
1221 | 
1222 | This composable returns a function that can be used to trigger the feedback
1223 | collection flow with the Reflag SDK. You can use this to prompt users for
1224 | feedback at any point in your application.
1225 | 
1226 | #### Returns
1227 | 
1228 | `Function`
1229 | 
1230 | A function that requests feedback from the user. The function accepts:
1231 |   - `options`: An object containing feedback request options.
1232 | 
1233 | ##### Parameters
1234 | 
1235 | <table>
1236 | <thead>
1237 | <tr>
1238 | <th>Parameter</th>
1239 | <th>Type</th>
1240 | </tr>
1241 | </thead>
1242 | <tbody>
1243 | <tr>
1244 | <td>
1245 | 
1246 | `options`
1247 | 
1248 | </td>
1249 | <td>
1250 | 
1251 | [`RequestFeedbackData`](../browser-sdk/globals.md#requestfeedbackdata)
1252 | 
1253 | </td>
1254 | </tr>
1255 | </tbody>
1256 | </table>
1257 | 
1258 | ##### Returns
1259 | 
1260 | `void`
1261 | 
1262 | #### Example
1263 | 
1264 | ```ts
1265 | import { useRequestFeedback } from '@reflag/vue-sdk';
1266 | 
1267 | const requestFeedback = useRequestFeedback();
1268 | 
1269 | // Request feedback from the user
1270 | requestFeedback({
1271 |   prompt: "How was your experience?",
1272 |   metadata: { page: "dashboard" }
1273 | });
1274 | ```
1275 | 
1276 | ***
1277 | 
1278 | ### useSendFeedback()
1279 | 
1280 | ```ts
1281 | function useSendFeedback(): (opts: UnassignedFeedback) => Promise<
1282 |   | undefined
1283 | | Response>
1284 | ```
1285 | 
1286 | Vue composable for sending feedback.
1287 | 
1288 | This composable returns a function that can be used to send feedback to the
1289 | Reflag SDK. You can use this to send feedback from your application.
1290 | 
1291 | #### Returns
1292 | 
1293 | `Function`
1294 | 
1295 | A function that sends feedback to the Reflag SDK. The function accepts:
1296 |   - `options`: An object containing feedback options.
1297 | 
1298 | ##### Parameters
1299 | 
1300 | <table>
1301 | <thead>
1302 | <tr>
1303 | <th>Parameter</th>
1304 | <th>Type</th>
1305 | </tr>
1306 | </thead>
1307 | <tbody>
1308 | <tr>
1309 | <td>
1310 | 
1311 | `opts`
1312 | 
1313 | </td>
1314 | <td>
1315 | 
1316 | [`UnassignedFeedback`](../browser-sdk/globals.md#unassignedfeedback)
1317 | 
1318 | </td>
1319 | </tr>
1320 | </tbody>
1321 | </table>
1322 | 
1323 | ##### Returns
1324 | 
1325 | [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<
1326 |   \| `undefined`
1327 |   \| [`Response`](https://developer.mozilla.org/docs/Web/API/Response)\>
1328 | 
1329 | #### Example
1330 | 
1331 | ```ts
1332 | import { useSendFeedback } from '@reflag/vue-sdk';
1333 | 
1334 | const sendFeedback = useSendFeedback();
1335 | 
1336 | // Send feedback from the user
1337 | sendFeedback({
1338 |   feedback: "I love this flag!",
1339 |   metadata: { page: "dashboard" }
1340 | });
1341 | ```
1342 | 
1343 | ***
1344 | 
1345 | ### useTrack()
1346 | 
1347 | ```ts
1348 | function useTrack(): (eventName: string, attributes?: 
1349 |   | null
1350 |   | Record<string, any>) => Promise<
1351 |   | undefined
1352 | | Response>
1353 | ```
1354 | 
1355 | Vue composable for tracking custom events.
1356 | 
1357 | This composable returns a function that can be used to track custom events
1358 | with the Reflag SDK.
1359 | 
1360 | #### Returns
1361 | 
1362 | `Function`
1363 | 
1364 | A function that tracks an event. The function accepts:
1365 |   - `eventName`: The name of the event to track.
1366 |   - `attributes`: (Optional) Additional attributes to associate with the event.
1367 | 
1368 | ##### Parameters
1369 | 
1370 | <table>
1371 | <thead>
1372 | <tr>
1373 | <th>Parameter</th>
1374 | <th>Type</th>
1375 | </tr>
1376 | </thead>
1377 | <tbody>
1378 | <tr>
1379 | <td>
1380 | 
1381 | `eventName`
1382 | 
1383 | </td>
1384 | <td>
1385 | 
1386 | `string`
1387 | 
1388 | </td>
1389 | </tr>
1390 | <tr>
1391 | <td>
1392 | 
1393 | `attributes`?
1394 | 
1395 | </td>
1396 | <td>
1397 | 
1398 |  \| `null` \| [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)\<`string`, `any`\>
1399 | 
1400 | </td>
1401 | </tr>
1402 | </tbody>
1403 | </table>
1404 | 
1405 | ##### Returns
1406 | 
1407 | [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<
1408 |   \| `undefined`
1409 |   \| [`Response`](https://developer.mozilla.org/docs/Web/API/Response)\>
1410 | 
1411 | #### Example
1412 | 
1413 | ```ts
1414 | import { useTrack } from '@reflag/vue-sdk';
1415 | 
1416 | const track = useTrack();
1417 | 
1418 | // Track a custom event
1419 | track('button_clicked', { buttonName: 'Start Huddles' });
1420 | ```
1421 | 
1422 | ***
1423 | 
1424 | ### useUpdateCompany()
1425 | 
1426 | ```ts
1427 | function useUpdateCompany(): (opts: {}) => Promise<void>
1428 | ```
1429 | 
1430 | Vue composable for updating the company context.
1431 | 
1432 | This composable returns a function that can be used to update the company
1433 | context with the Reflag SDK. You can use this to update the company context
1434 | at any point in your application.
1435 | 
1436 | #### Returns
1437 | 
1438 | `Function`
1439 | 
1440 | A function that updates the company context. The function accepts:
1441 |   - `opts`: An object containing the company context to update.
1442 | 
1443 | ##### Parameters
1444 | 
1445 | <table>
1446 | <thead>
1447 | <tr>
1448 | <th>Parameter</th>
1449 | <th>Type</th>
1450 | </tr>
1451 | </thead>
1452 | <tbody>
1453 | <tr>
1454 | <td>
1455 | 
1456 | `opts`
1457 | 
1458 | </td>
1459 | <td>
1460 | 
1461 | \{\}
1462 | 
1463 | </td>
1464 | </tr>
1465 | </tbody>
1466 | </table>
1467 | 
1468 | ##### Returns
1469 | 
1470 | [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<`void`\>
1471 | 
1472 | #### Example
1473 | 
1474 | ```ts
1475 | import { useUpdateCompany } from '@reflag/vue-sdk';
1476 | 
1477 | const updateCompany = useUpdateCompany();
1478 | 
1479 | // Update the company context
1480 | updateCompany({ id: "123", name: "Acme Inc." });
1481 | ```
1482 | 
1483 | ***
1484 | 
1485 | ### useUpdateOtherContext()
1486 | 
1487 | ```ts
1488 | function useUpdateOtherContext(): (opts: {}) => Promise<void>
1489 | ```
1490 | 
1491 | Vue composable for updating the other context.
1492 | 
1493 | This composable returns a function that can be used to update the other
1494 | context with the Reflag SDK. You can use this to update the other context
1495 | at any point in your application.
1496 | 
1497 | #### Returns
1498 | 
1499 | `Function`
1500 | 
1501 | A function that updates the other context. The function accepts:
1502 |   - `opts`: An object containing the other context to update.
1503 | 
1504 | ##### Parameters
1505 | 
1506 | <table>
1507 | <thead>
1508 | <tr>
1509 | <th>Parameter</th>
1510 | <th>Type</th>
1511 | </tr>
1512 | </thead>
1513 | <tbody>
1514 | <tr>
1515 | <td>
1516 | 
1517 | `opts`
1518 | 
1519 | </td>
1520 | <td>
1521 | 
1522 | \{\}
1523 | 
1524 | </td>
1525 | </tr>
1526 | </tbody>
1527 | </table>
1528 | 
1529 | ##### Returns
1530 | 
1531 | [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<`void`\>
1532 | 
1533 | #### Example
1534 | 
1535 | ```ts
1536 | import { useUpdateOtherContext } from '@reflag/vue-sdk';
1537 | 
1538 | const updateOtherContext = useUpdateOtherContext();
1539 | 
1540 | // Update the other context
1541 | updateOtherContext({ id: "123", name: "Acme Inc." });
1542 | ```
1543 | 
1544 | ***
1545 | 
1546 | ### useUpdateUser()
1547 | 
1548 | ```ts
1549 | function useUpdateUser(): (opts: {}) => Promise<void>
1550 | ```
1551 | 
1552 | Vue composable for updating the user context.
1553 | 
1554 | This composable returns a function that can be used to update the user context
1555 | with the Reflag SDK. You can use this to update the user context at any point
1556 | in your application.
1557 | 
1558 | #### Returns
1559 | 
1560 | `Function`
1561 | 
1562 | A function that updates the user context. The function accepts:
1563 |   - `opts`: An object containing the user context to update.
1564 | 
1565 | ##### Parameters
1566 | 
1567 | <table>
1568 | <thead>
1569 | <tr>
1570 | <th>Parameter</th>
1571 | <th>Type</th>
1572 | </tr>
1573 | </thead>
1574 | <tbody>
1575 | <tr>
1576 | <td>
1577 | 
1578 | `opts`
1579 | 
1580 | </td>
1581 | <td>
1582 | 
1583 | \{\}
1584 | 
1585 | </td>
1586 | </tr>
1587 | </tbody>
1588 | </table>
1589 | 
1590 | ##### Returns
1591 | 
1592 | [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<`void`\>
1593 | 
1594 | #### Example
1595 | 
1596 | ```ts
1597 | import { useUpdateUser } from '@reflag/vue-sdk';
1598 | 
1599 | const updateUser = useUpdateUser();
1600 | 
1601 | // Update the user context
1602 | updateUser({ id: "123", name: "John Doe" });
1603 | ```
1604 | 
1605 | ## References
1606 | 
1607 | ### ReflagClientProvider
1608 | 
1609 | Renames and re-exports [ReflagBootstrappedProvider](globals.md#reflagbootstrappedprovider)
1610 | 
1611 | ### ReflagProvider
1612 | 
1613 | Renames and re-exports [ReflagBootstrappedProvider](globals.md#reflagbootstrappedprovider)
1614 | 
```

--------------------------------------------------------------------------------
/sdk/@reflag/react-sdk/globals.md:
--------------------------------------------------------------------------------

```markdown
   1 | ---
   2 | layout:
   3 |   visible: true
   4 | title:
   5 |   visible: true
   6 | description:
   7 |   visible: false
   8 | tableOfContents:
   9 |   visible: true
  10 | outline:
  11 |   visible: true
  12 | pagination:
  13 |   visible: true
  14 | ---
  15 | 
  16 | # @reflag/react-sdk
  17 | 
  18 | ## Interfaces
  19 | 
  20 | ### CheckEvent
  21 | 
  22 | Event representing checking the flag evaluation result
  23 | 
  24 | #### Properties
  25 | 
  26 | <table>
  27 | <thead>
  28 | <tr>
  29 | <th>Property</th>
  30 | <th>Type</th>
  31 | <th>Description</th>
  32 | </tr>
  33 | </thead>
  34 | <tbody>
  35 | <tr>
  36 | <td>
  37 | 
  38 | <a id="action"></a> `action`
  39 | 
  40 | </td>
  41 | <td>
  42 | 
  43 | `"check-is-enabled"` \| `"check-config"`
  44 | 
  45 | </td>
  46 | <td>
  47 | 
  48 | `check-is-enabled` means `isEnabled` was checked, `check-config` means `config` was checked.
  49 | 
  50 | </td>
  51 | </tr>
  52 | <tr>
  53 | <td>
  54 | 
  55 | <a id="key"></a> `key`
  56 | 
  57 | </td>
  58 | <td>
  59 | 
  60 | `string`
  61 | 
  62 | </td>
  63 | <td>
  64 | 
  65 | Flag key.
  66 | 
  67 | </td>
  68 | </tr>
  69 | <tr>
  70 | <td>
  71 | 
  72 | <a id="missingcontextfields"></a> `missingContextFields?`
  73 | 
  74 | </td>
  75 | <td>
  76 | 
  77 | `string`[]
  78 | 
  79 | </td>
  80 | <td>
  81 | 
  82 | Missing context fields.
  83 | 
  84 | </td>
  85 | </tr>
  86 | <tr>
  87 | <td>
  88 | 
  89 | <a id="ruleevaluationresults"></a> `ruleEvaluationResults?`
  90 | 
  91 | </td>
  92 | <td>
  93 | 
  94 | `boolean`[]
  95 | 
  96 | </td>
  97 | <td>
  98 | 
  99 | Rule evaluation results.
 100 | 
 101 | </td>
 102 | </tr>
 103 | <tr>
 104 | <td>
 105 | 
 106 | <a id="value"></a> `value?`
 107 | 
 108 | </td>
 109 | <td>
 110 | 
 111 |  \| `boolean` \| \{ `key`: `string`; `payload`: `any`; \}
 112 | 
 113 | </td>
 114 | <td>
 115 | 
 116 | Result of flag or configuration evaluation.
 117 | If `action` is `check-is-enabled`, this is the result of the flag evaluation and `value` is a boolean.
 118 | If `action` is `check-config`, this is the result of the configuration evaluation.
 119 | 
 120 | </td>
 121 | </tr>
 122 | <tr>
 123 | <td>
 124 | 
 125 | <a id="version"></a> `version?`
 126 | 
 127 | </td>
 128 | <td>
 129 | 
 130 | `number`
 131 | 
 132 | </td>
 133 | <td>
 134 | 
 135 | Version of targeting rules.
 136 | 
 137 | </td>
 138 | </tr>
 139 | </tbody>
 140 | </table>
 141 | 
 142 | ***
 143 | 
 144 | ### CompanyContext
 145 | 
 146 | Context is a set of key-value pairs.
 147 | This is used to determine if feature targeting matches and to track events.
 148 | Id should always be present so that it can be referenced to an existing company.
 149 | 
 150 | #### Indexable
 151 | 
 152 | ```ts
 153 | [key: string]: undefined | string | number
 154 | ```
 155 | 
 156 | #### Properties
 157 | 
 158 | <table>
 159 | <thead>
 160 | <tr>
 161 | <th>Property</th>
 162 | <th>Type</th>
 163 | <th>Description</th>
 164 | </tr>
 165 | </thead>
 166 | <tbody>
 167 | <tr>
 168 | <td>
 169 | 
 170 | <a id="id"></a> `id`
 171 | 
 172 | </td>
 173 | <td>
 174 | 
 175 | `undefined` \| `string` \| `number`
 176 | 
 177 | </td>
 178 | <td>
 179 | 
 180 | Company id
 181 | 
 182 | </td>
 183 | </tr>
 184 | <tr>
 185 | <td>
 186 | 
 187 | <a id="name"></a> `name?`
 188 | 
 189 | </td>
 190 | <td>
 191 | 
 192 | `string`
 193 | 
 194 | </td>
 195 | <td>
 196 | 
 197 | Company name
 198 | 
 199 | </td>
 200 | </tr>
 201 | </tbody>
 202 | </table>
 203 | 
 204 | ***
 205 | 
 206 | ### Flag\<TConfig\>
 207 | 
 208 | Describes a feature
 209 | 
 210 | #### Type Parameters
 211 | 
 212 | <table>
 213 | <thead>
 214 | <tr>
 215 | <th>Type Parameter</th>
 216 | <th>Default type</th>
 217 | </tr>
 218 | </thead>
 219 | <tbody>
 220 | <tr>
 221 | <td>
 222 | 
 223 | `TConfig` *extends* [`FlagType`](globals.md#flagtype)\[`"config"`\]
 224 | 
 225 | </td>
 226 | <td>
 227 | 
 228 | [`EmptyFlagRemoteConfig`](globals.md#emptyflagremoteconfig)
 229 | 
 230 | </td>
 231 | </tr>
 232 | </tbody>
 233 | </table>
 234 | 
 235 | #### Properties
 236 | 
 237 | <table>
 238 | <thead>
 239 | <tr>
 240 | <th>Property</th>
 241 | <th>Type</th>
 242 | <th>Description</th>
 243 | </tr>
 244 | </thead>
 245 | <tbody>
 246 | <tr>
 247 | <td>
 248 | 
 249 | <a id="config"></a> `config`
 250 | 
 251 | </td>
 252 | <td>
 253 | 
 254 |  \| [`EmptyFlagRemoteConfig`](globals.md#emptyflagremoteconfig) \| \{ `key`: `string`; \} & `TConfig`
 255 | 
 256 | </td>
 257 | <td>
 258 | 
 259 | &hyphen;
 260 | 
 261 | </td>
 262 | </tr>
 263 | <tr>
 264 | <td>
 265 | 
 266 | <a id="isenabled"></a> `isEnabled`
 267 | 
 268 | </td>
 269 | <td>
 270 | 
 271 | `boolean`
 272 | 
 273 | </td>
 274 | <td>
 275 | 
 276 | If the feature is enabled.
 277 | 
 278 | </td>
 279 | </tr>
 280 | <tr>
 281 | <td>
 282 | 
 283 | <a id="isloading"></a> `isLoading`
 284 | 
 285 | </td>
 286 | <td>
 287 | 
 288 | `boolean`
 289 | 
 290 | </td>
 291 | <td>
 292 | 
 293 | If the feature is loading.
 294 | 
 295 | </td>
 296 | </tr>
 297 | <tr>
 298 | <td>
 299 | 
 300 | <a id="key-1"></a> `key`
 301 | 
 302 | </td>
 303 | <td>
 304 | 
 305 | `string`
 306 | 
 307 | </td>
 308 | <td>
 309 | 
 310 | The key of the feature.
 311 | 
 312 | </td>
 313 | </tr>
 314 | <tr>
 315 | <td>
 316 | 
 317 | <a id="requestfeedback"></a> `requestFeedback`
 318 | 
 319 | </td>
 320 | <td>
 321 | 
 322 | (`opts`: [`RequestFeedbackOptions`](globals.md#requestfeedbackoptions)) => `void`
 323 | 
 324 | </td>
 325 | <td>
 326 | 
 327 | Request feedback from the user.
 328 | 
 329 | </td>
 330 | </tr>
 331 | </tbody>
 332 | </table>
 333 | 
 334 | #### Methods
 335 | 
 336 | ##### track()
 337 | 
 338 | ```ts
 339 | track(): 
 340 |   | undefined
 341 |   | Promise<
 342 |   | undefined
 343 | | Response>
 344 | ```
 345 | 
 346 | Track feature usage in Reflag.
 347 | 
 348 | ###### Returns
 349 | 
 350 |   \| `undefined`
 351 |   \| [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<
 352 |   \| `undefined`
 353 |   \| [`Response`](https://developer.mozilla.org/docs/Web/API/Response)\>
 354 | 
 355 | ***
 356 | 
 357 | ### Flags
 358 | 
 359 | ***
 360 | 
 361 | ### UserContext
 362 | 
 363 | Context is a set of key-value pairs.
 364 | This is used to determine if feature targeting matches and to track events.
 365 | Id should always be present so that it can be referenced to an existing user.
 366 | 
 367 | #### Indexable
 368 | 
 369 | ```ts
 370 | [key: string]: undefined | string | number
 371 | ```
 372 | 
 373 | #### Properties
 374 | 
 375 | <table>
 376 | <thead>
 377 | <tr>
 378 | <th>Property</th>
 379 | <th>Type</th>
 380 | <th>Description</th>
 381 | </tr>
 382 | </thead>
 383 | <tbody>
 384 | <tr>
 385 | <td>
 386 | 
 387 | <a id="email"></a> `email?`
 388 | 
 389 | </td>
 390 | <td>
 391 | 
 392 | `string`
 393 | 
 394 | </td>
 395 | <td>
 396 | 
 397 | User email
 398 | 
 399 | </td>
 400 | </tr>
 401 | <tr>
 402 | <td>
 403 | 
 404 | <a id="id-1"></a> `id`
 405 | 
 406 | </td>
 407 | <td>
 408 | 
 409 | `undefined` \| `string` \| `number`
 410 | 
 411 | </td>
 412 | <td>
 413 | 
 414 | User id
 415 | 
 416 | </td>
 417 | </tr>
 418 | <tr>
 419 | <td>
 420 | 
 421 | <a id="name-1"></a> `name?`
 422 | 
 423 | </td>
 424 | <td>
 425 | 
 426 | `string`
 427 | 
 428 | </td>
 429 | <td>
 430 | 
 431 | User name
 432 | 
 433 | </td>
 434 | </tr>
 435 | </tbody>
 436 | </table>
 437 | 
 438 | ## Type Aliases
 439 | 
 440 | ### BootstrappedFlags
 441 | 
 442 | ```ts
 443 | type BootstrappedFlags = {
 444 |   context: ReflagContext;
 445 |   flags: RawFlags;
 446 | };
 447 | ```
 448 | 
 449 | #### Type declaration
 450 | 
 451 | <table>
 452 | <thead>
 453 | <tr>
 454 | <th>Name</th>
 455 | <th>Type</th>
 456 | </tr>
 457 | </thead>
 458 | <tbody>
 459 | <tr>
 460 | <td>
 461 | 
 462 | <a id="context"></a> `context`
 463 | 
 464 | </td>
 465 | <td>
 466 | 
 467 | [`ReflagContext`](../browser-sdk/globals.md#reflagcontext)
 468 | 
 469 | </td>
 470 | </tr>
 471 | <tr>
 472 | <td>
 473 | 
 474 | <a id="flags-1"></a> `flags`
 475 | 
 476 | </td>
 477 | <td>
 478 | 
 479 | [`RawFlags`](globals.md#rawflags)
 480 | 
 481 | </td>
 482 | </tr>
 483 | </tbody>
 484 | </table>
 485 | 
 486 | ***
 487 | 
 488 | ### EmptyFlagRemoteConfig
 489 | 
 490 | ```ts
 491 | type EmptyFlagRemoteConfig = {
 492 |   key: undefined;
 493 |   payload: undefined;
 494 | };
 495 | ```
 496 | 
 497 | #### Type declaration
 498 | 
 499 | <table>
 500 | <thead>
 501 | <tr>
 502 | <th>Name</th>
 503 | <th>Type</th>
 504 | </tr>
 505 | </thead>
 506 | <tbody>
 507 | <tr>
 508 | <td>
 509 | 
 510 | <a id="key-2"></a> `key`
 511 | 
 512 | </td>
 513 | <td>
 514 | 
 515 | `undefined`
 516 | 
 517 | </td>
 518 | </tr>
 519 | <tr>
 520 | <td>
 521 | 
 522 | <a id="payload"></a> `payload`
 523 | 
 524 | </td>
 525 | <td>
 526 | 
 527 | `undefined`
 528 | 
 529 | </td>
 530 | </tr>
 531 | </tbody>
 532 | </table>
 533 | 
 534 | ***
 535 | 
 536 | ### FlagKey
 537 | 
 538 | ```ts
 539 | type FlagKey = keyof TypedFlags;
 540 | ```
 541 | 
 542 | ***
 543 | 
 544 | ### FlagRemoteConfig
 545 | 
 546 | ```ts
 547 | type FlagRemoteConfig = 
 548 |   | {
 549 |   key: string;
 550 |   payload: any;
 551 |  }
 552 |   | EmptyFlagRemoteConfig;
 553 | ```
 554 | 
 555 | A remotely managed configuration value for a feature.
 556 | 
 557 | #### Type declaration
 558 | 
 559 | \{
 560 |   `key`: `string`;
 561 |   `payload`: `any`;
 562 |  \}
 563 | 
 564 | <table>
 565 | <thead>
 566 | <tr>
 567 | <th>Name</th>
 568 | <th>Type</th>
 569 | <th>Description</th>
 570 | </tr>
 571 | </thead>
 572 | <tbody>
 573 | <tr>
 574 | <td>
 575 | 
 576 | `key`
 577 | 
 578 | </td>
 579 | <td>
 580 | 
 581 | `string`
 582 | 
 583 | </td>
 584 | <td>
 585 | 
 586 | The key of the matched configuration value.
 587 | 
 588 | </td>
 589 | </tr>
 590 | <tr>
 591 | <td>
 592 | 
 593 | `payload`
 594 | 
 595 | </td>
 596 | <td>
 597 | 
 598 | `any`
 599 | 
 600 | </td>
 601 | <td>
 602 | 
 603 | The optional user-supplied payload data.
 604 | 
 605 | </td>
 606 | </tr>
 607 | </tbody>
 608 | </table>
 609 | 
 610 | [`EmptyFlagRemoteConfig`](globals.md#emptyflagremoteconfig)
 611 | 
 612 | ***
 613 | 
 614 | ### FlagType
 615 | 
 616 | ```ts
 617 | type FlagType = {
 618 |   config: {
 619 |      payload: any;
 620 |     };
 621 | };
 622 | ```
 623 | 
 624 | #### Type declaration
 625 | 
 626 | <table>
 627 | <thead>
 628 | <tr>
 629 | <th>Name</th>
 630 | <th>Type</th>
 631 | </tr>
 632 | </thead>
 633 | <tbody>
 634 | <tr>
 635 | <td>
 636 | 
 637 | <a id="config-1"></a> `config`?
 638 | 
 639 | </td>
 640 | <td>
 641 | 
 642 | \{
 643 |   `payload`: `any`;
 644 |  \}
 645 | 
 646 | </td>
 647 | </tr>
 648 | <tr>
 649 | <td>
 650 | 
 651 | `config.payload`
 652 | 
 653 | </td>
 654 | <td>
 655 | 
 656 | `any`
 657 | 
 658 | </td>
 659 | </tr>
 660 | </tbody>
 661 | </table>
 662 | 
 663 | ***
 664 | 
 665 | ### RawFlags
 666 | 
 667 | ```ts
 668 | type RawFlags = Record<FlagKey, RawFlag>;
 669 | ```
 670 | 
 671 | Describes a collection of evaluated raw flags.
 672 | 
 673 | ***
 674 | 
 675 | ### ReflagBootstrappedProps
 676 | 
 677 | ```ts
 678 | type ReflagBootstrappedProps = ReflagPropsBase & ReflagInitOptionsBase & {
 679 |   flags: BootstrappedFlags;
 680 | };
 681 | ```
 682 | 
 683 | Props for the ReflagBootstrappedProvider.
 684 | 
 685 | #### Type declaration
 686 | 
 687 | <table>
 688 | <thead>
 689 | <tr>
 690 | <th>Name</th>
 691 | <th>Type</th>
 692 | <th>Description</th>
 693 | </tr>
 694 | </thead>
 695 | <tbody>
 696 | <tr>
 697 | <td>
 698 | 
 699 | `flags`
 700 | 
 701 | </td>
 702 | <td>
 703 | 
 704 | [`BootstrappedFlags`](globals.md#bootstrappedflags)
 705 | 
 706 | </td>
 707 | <td>
 708 | 
 709 | Pre-fetched flags to be used instead of fetching them from the server.
 710 | 
 711 | </td>
 712 | </tr>
 713 | </tbody>
 714 | </table>
 715 | 
 716 | ***
 717 | 
 718 | ### ReflagClientProviderProps
 719 | 
 720 | ```ts
 721 | type ReflagClientProviderProps = Omit<ReflagPropsBase, "debug"> & {
 722 |   client: ReflagClient;
 723 | };
 724 | ```
 725 | 
 726 | Props for the ReflagClientProvider.
 727 | 
 728 | #### Type declaration
 729 | 
 730 | <table>
 731 | <thead>
 732 | <tr>
 733 | <th>Name</th>
 734 | <th>Type</th>
 735 | </tr>
 736 | </thead>
 737 | <tbody>
 738 | <tr>
 739 | <td>
 740 | 
 741 | `client`
 742 | 
 743 | </td>
 744 | <td>
 745 | 
 746 | [`ReflagClient`](../browser-sdk/globals.md#reflagclient)
 747 | 
 748 | </td>
 749 | </tr>
 750 | </tbody>
 751 | </table>
 752 | 
 753 | ***
 754 | 
 755 | ### ReflagInitOptionsBase
 756 | 
 757 | ```ts
 758 | type ReflagInitOptionsBase = Omit<InitOptions, "user" | "company" | "other" | "otherContext" | "bootstrappedFlags">;
 759 | ```
 760 | 
 761 | **`Internal`**
 762 | 
 763 | Base init options for the ReflagProvider and ReflagBootstrappedProvider.
 764 | 
 765 | ***
 766 | 
 767 | ### ReflagProps
 768 | 
 769 | ```ts
 770 | type ReflagProps = ReflagPropsBase & ReflagInitOptionsBase & {
 771 |   company: CompanyContext;
 772 |   context: ReflagContext;
 773 |   otherContext: Record<string, string | number | undefined>;
 774 |   user: UserContext;
 775 | };
 776 | ```
 777 | 
 778 | Props for the ReflagProvider.
 779 | 
 780 | #### Type declaration
 781 | 
 782 | <table>
 783 | <thead>
 784 | <tr>
 785 | <th>Name</th>
 786 | <th>Type</th>
 787 | <th>Description</th>
 788 | </tr>
 789 | </thead>
 790 | <tbody>
 791 | <tr>
 792 | <td>
 793 | 
 794 | `company`?
 795 | 
 796 | </td>
 797 | <td>
 798 | 
 799 | [`CompanyContext`](globals.md#companycontext)
 800 | 
 801 | </td>
 802 | <td>
 803 | 
 804 | Company related context. If you provide `id` Reflag will enrich the evaluation context with
 805 | company attributes on Reflag servers.
 806 | 
 807 | **Deprecated**
 808 | 
 809 | Use `context` instead, this property will be removed in the next major version
 810 | 
 811 | </td>
 812 | </tr>
 813 | <tr>
 814 | <td>
 815 | 
 816 | `context`?
 817 | 
 818 | </td>
 819 | <td>
 820 | 
 821 | [`ReflagContext`](../browser-sdk/globals.md#reflagcontext)
 822 | 
 823 | </td>
 824 | <td>
 825 | 
 826 | The context to use for the ReflagClient containing user, company, and other context.
 827 | 
 828 | </td>
 829 | </tr>
 830 | <tr>
 831 | <td>
 832 | 
 833 | `otherContext`?
 834 | 
 835 | </td>
 836 | <td>
 837 | 
 838 | [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)\<`string`, `string` \| `number` \| `undefined`\>
 839 | 
 840 | </td>
 841 | <td>
 842 | 
 843 | Context which is not related to a user or a company.
 844 | 
 845 | **Deprecated**
 846 | 
 847 | Use `context` instead, this property will be removed in the next major version
 848 | 
 849 | </td>
 850 | </tr>
 851 | <tr>
 852 | <td>
 853 | 
 854 | `user`?
 855 | 
 856 | </td>
 857 | <td>
 858 | 
 859 | [`UserContext`](globals.md#usercontext)
 860 | 
 861 | </td>
 862 | <td>
 863 | 
 864 | User related context. If you provide `id` Reflag will enrich the evaluation context with
 865 | user attributes on Reflag servers.
 866 | 
 867 | **Deprecated**
 868 | 
 869 | Use `context` instead, this property will be removed in the next major version
 870 | 
 871 | </td>
 872 | </tr>
 873 | </tbody>
 874 | </table>
 875 | 
 876 | ***
 877 | 
 878 | ### ReflagPropsBase
 879 | 
 880 | ```ts
 881 | type ReflagPropsBase = {
 882 |   children: ReactNode;
 883 |   debug: boolean;
 884 |   initialLoading: boolean;
 885 |   loadingComponent: ReactNode;
 886 | };
 887 | ```
 888 | 
 889 | **`Internal`**
 890 | 
 891 | Base props for the ReflagProvider and ReflagBootstrappedProvider.
 892 | 
 893 | #### Type declaration
 894 | 
 895 | <table>
 896 | <thead>
 897 | <tr>
 898 | <th>Name</th>
 899 | <th>Type</th>
 900 | <th>Description</th>
 901 | </tr>
 902 | </thead>
 903 | <tbody>
 904 | <tr>
 905 | <td>
 906 | 
 907 | <a id="children"></a> `children`?
 908 | 
 909 | </td>
 910 | <td>
 911 | 
 912 | `ReactNode`
 913 | 
 914 | </td>
 915 | <td>
 916 | 
 917 | The children to render after the client is initialized.
 918 | 
 919 | </td>
 920 | </tr>
 921 | <tr>
 922 | <td>
 923 | 
 924 | <a id="debug"></a> `debug`?
 925 | 
 926 | </td>
 927 | <td>
 928 | 
 929 | `boolean`
 930 | 
 931 | </td>
 932 | <td>
 933 | 
 934 | Set to `true` to enable debug logging to the console,
 935 | 
 936 | </td>
 937 | </tr>
 938 | <tr>
 939 | <td>
 940 | 
 941 | <a id="initialloading"></a> `initialLoading`?
 942 | 
 943 | </td>
 944 | <td>
 945 | 
 946 | `boolean`
 947 | 
 948 | </td>
 949 | <td>
 950 | 
 951 | Set to `true` to show the loading component while the client is initializing.
 952 | 
 953 | </td>
 954 | </tr>
 955 | <tr>
 956 | <td>
 957 | 
 958 | <a id="loadingcomponent"></a> `loadingComponent`?
 959 | 
 960 | </td>
 961 | <td>
 962 | 
 963 | `ReactNode`
 964 | 
 965 | </td>
 966 | <td>
 967 | 
 968 | A React component to show while the client is initializing.
 969 | 
 970 | </td>
 971 | </tr>
 972 | </tbody>
 973 | </table>
 974 | 
 975 | ***
 976 | 
 977 | ### RequestFeedbackOptions
 978 | 
 979 | ```ts
 980 | type RequestFeedbackOptions = Omit<RequestFeedbackData, "flagKey" | "featureId">;
 981 | ```
 982 | 
 983 | ***
 984 | 
 985 | ### TrackEvent
 986 | 
 987 | ```ts
 988 | type TrackEvent = {
 989 |   attributes:   | Record<string, any>
 990 |      | null;
 991 |   company: CompanyContext;
 992 |   eventName: string;
 993 |   user: UserContext;
 994 | };
 995 | ```
 996 | 
 997 | #### Type declaration
 998 | 
 999 | <table>
1000 | <thead>
1001 | <tr>
1002 | <th>Name</th>
1003 | <th>Type</th>
1004 | </tr>
1005 | </thead>
1006 | <tbody>
1007 | <tr>
1008 | <td>
1009 | 
1010 | <a id="attributes"></a> `attributes`?
1011 | 
1012 | </td>
1013 | <td>
1014 | 
1015 |   \| [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)\<`string`, `any`\>
1016 |   \| `null`
1017 | 
1018 | </td>
1019 | </tr>
1020 | <tr>
1021 | <td>
1022 | 
1023 | <a id="company"></a> `company`?
1024 | 
1025 | </td>
1026 | <td>
1027 | 
1028 | [`CompanyContext`](globals.md#companycontext)
1029 | 
1030 | </td>
1031 | </tr>
1032 | <tr>
1033 | <td>
1034 | 
1035 | <a id="eventname"></a> `eventName`
1036 | 
1037 | </td>
1038 | <td>
1039 | 
1040 | `string`
1041 | 
1042 | </td>
1043 | </tr>
1044 | <tr>
1045 | <td>
1046 | 
1047 | <a id="user"></a> `user`
1048 | 
1049 | </td>
1050 | <td>
1051 | 
1052 | [`UserContext`](globals.md#usercontext)
1053 | 
1054 | </td>
1055 | </tr>
1056 | </tbody>
1057 | </table>
1058 | 
1059 | ***
1060 | 
1061 | ### TypedFlags
1062 | 
1063 | ```ts
1064 | type TypedFlags = keyof Flags extends never ? Record<string, Flag> : { [TypedFlagKey in keyof Flags]: Flags[TypedFlagKey] extends FlagType ? Flag<Flags[TypedFlagKey]["config"]> : Flag };
1065 | ```
1066 | 
1067 | Describes a collection of evaluated feature.
1068 | 
1069 | #### Remarks
1070 | 
1071 | This types falls back to a generic Record<string, Flag> if the Flags interface
1072 | has not been extended.
1073 | 
1074 | ## Functions
1075 | 
1076 | ### ReflagBootstrappedProvider()
1077 | 
1078 | ```ts
1079 | function ReflagBootstrappedProvider(__namedParameters: ReflagBootstrappedProps): Element
1080 | ```
1081 | 
1082 | Bootstrapped Provider for the ReflagClient using pre-fetched flags.
1083 | 
1084 | #### Parameters
1085 | 
1086 | <table>
1087 | <thead>
1088 | <tr>
1089 | <th>Parameter</th>
1090 | <th>Type</th>
1091 | </tr>
1092 | </thead>
1093 | <tbody>
1094 | <tr>
1095 | <td>
1096 | 
1097 | `__namedParameters`
1098 | 
1099 | </td>
1100 | <td>
1101 | 
1102 | [`ReflagBootstrappedProps`](globals.md#reflagbootstrappedprops)
1103 | 
1104 | </td>
1105 | </tr>
1106 | </tbody>
1107 | </table>
1108 | 
1109 | #### Returns
1110 | 
1111 | `Element`
1112 | 
1113 | ***
1114 | 
1115 | ### ReflagClientProvider()
1116 | 
1117 | ```ts
1118 | function ReflagClientProvider(__namedParameters: ReflagClientProviderProps): Element
1119 | ```
1120 | 
1121 | #### Parameters
1122 | 
1123 | <table>
1124 | <thead>
1125 | <tr>
1126 | <th>Parameter</th>
1127 | <th>Type</th>
1128 | </tr>
1129 | </thead>
1130 | <tbody>
1131 | <tr>
1132 | <td>
1133 | 
1134 | `__namedParameters`
1135 | 
1136 | </td>
1137 | <td>
1138 | 
1139 | [`ReflagClientProviderProps`](globals.md#reflagclientproviderprops)
1140 | 
1141 | </td>
1142 | </tr>
1143 | </tbody>
1144 | </table>
1145 | 
1146 | #### Returns
1147 | 
1148 | `Element`
1149 | 
1150 | ***
1151 | 
1152 | ### ReflagProvider()
1153 | 
1154 | ```ts
1155 | function ReflagProvider(__namedParameters: ReflagProps): Element
1156 | ```
1157 | 
1158 | Provider for the ReflagClient.
1159 | 
1160 | #### Parameters
1161 | 
1162 | <table>
1163 | <thead>
1164 | <tr>
1165 | <th>Parameter</th>
1166 | <th>Type</th>
1167 | </tr>
1168 | </thead>
1169 | <tbody>
1170 | <tr>
1171 | <td>
1172 | 
1173 | `__namedParameters`
1174 | 
1175 | </td>
1176 | <td>
1177 | 
1178 | [`ReflagProps`](globals.md#reflagprops)
1179 | 
1180 | </td>
1181 | </tr>
1182 | </tbody>
1183 | </table>
1184 | 
1185 | #### Returns
1186 | 
1187 | `Element`
1188 | 
1189 | ***
1190 | 
1191 | ### useClient()
1192 | 
1193 | ```ts
1194 | function useClient(): ReflagClient
1195 | ```
1196 | 
1197 | Returns the current `ReflagClient` used by the `ReflagProvider`.
1198 | 
1199 | This is useful if you need to access the `ReflagClient` outside of the `ReflagProvider`.
1200 | 
1201 | #### Returns
1202 | 
1203 | [`ReflagClient`](../browser-sdk/globals.md#reflagclient)
1204 | 
1205 | The `ReflagClient`.
1206 | 
1207 | #### Example
1208 | 
1209 | ```ts
1210 | import { useClient } from '@reflag/react-sdk';
1211 | 
1212 | function App() {
1213 |   const client = useClient();
1214 |   console.log(client.getContext());
1215 | }
1216 | ```
1217 | 
1218 | ***
1219 | 
1220 | ### ~~useFeature()~~
1221 | 
1222 | ```ts
1223 | function useFeature<TKey>(key: TKey): Flag
1224 | ```
1225 | 
1226 | #### Type Parameters
1227 | 
1228 | <table>
1229 | <thead>
1230 | <tr>
1231 | <th>Type Parameter</th>
1232 | </tr>
1233 | </thead>
1234 | <tbody>
1235 | <tr>
1236 | <td>
1237 | 
1238 | `TKey` *extends* `string`
1239 | 
1240 | </td>
1241 | </tr>
1242 | </tbody>
1243 | </table>
1244 | 
1245 | #### Parameters
1246 | 
1247 | <table>
1248 | <thead>
1249 | <tr>
1250 | <th>Parameter</th>
1251 | <th>Type</th>
1252 | </tr>
1253 | </thead>
1254 | <tbody>
1255 | <tr>
1256 | <td>
1257 | 
1258 | `key`
1259 | 
1260 | </td>
1261 | <td>
1262 | 
1263 | `TKey`
1264 | 
1265 | </td>
1266 | </tr>
1267 | </tbody>
1268 | </table>
1269 | 
1270 | #### Returns
1271 | 
1272 | [`Flag`](globals.md#flagtconfig)
1273 | 
1274 | #### Deprecated
1275 | 
1276 | use `useFlag` instead
1277 | 
1278 | ***
1279 | 
1280 | ### useFlag()
1281 | 
1282 | ```ts
1283 | function useFlag<TKey>(key: TKey): TypedFlags[TKey]
1284 | ```
1285 | 
1286 | Returns the state of a given feature for the current context, e.g.
1287 | 
1288 | ```ts
1289 | function HuddleButton() {
1290 |   const {isEnabled, config: { payload }, track} = useFlag("huddle");
1291 |   if (isEnabled) {
1292 |    return <button onClick={() => track()}>{payload?.buttonTitle ?? "Start Huddle"}</button>;
1293 | }
1294 | ```
1295 | 
1296 | #### Type Parameters
1297 | 
1298 | <table>
1299 | <thead>
1300 | <tr>
1301 | <th>Type Parameter</th>
1302 | </tr>
1303 | </thead>
1304 | <tbody>
1305 | <tr>
1306 | <td>
1307 | 
1308 | `TKey` *extends* `string`
1309 | 
1310 | </td>
1311 | </tr>
1312 | </tbody>
1313 | </table>
1314 | 
1315 | #### Parameters
1316 | 
1317 | <table>
1318 | <thead>
1319 | <tr>
1320 | <th>Parameter</th>
1321 | <th>Type</th>
1322 | </tr>
1323 | </thead>
1324 | <tbody>
1325 | <tr>
1326 | <td>
1327 | 
1328 | `key`
1329 | 
1330 | </td>
1331 | <td>
1332 | 
1333 | `TKey`
1334 | 
1335 | </td>
1336 | </tr>
1337 | </tbody>
1338 | </table>
1339 | 
1340 | #### Returns
1341 | 
1342 | [`TypedFlags`](globals.md#typedflags)\[`TKey`\]
1343 | 
1344 | ***
1345 | 
1346 | ### useIsLoading()
1347 | 
1348 | ```ts
1349 | function useIsLoading(): boolean
1350 | ```
1351 | 
1352 | Returns a boolean indicating if the Reflag client is loading.
1353 | You can use this to check if the Reflag client is loading at any point in your application.
1354 | Initially, the value will be true until the client is initialized.
1355 | 
1356 | #### Returns
1357 | 
1358 | `boolean`
1359 | 
1360 | A boolean indicating if the Reflag client is loading.
1361 | 
1362 | #### Example
1363 | 
1364 | ```ts
1365 | import { useIsLoading } from '@reflag/react-sdk';
1366 | 
1367 | const isLoading = useIsLoading();
1368 | 
1369 | console.log(isLoading);
1370 | ```
1371 | 
1372 | ***
1373 | 
1374 | ### useOnEvent()
1375 | 
1376 | ```ts
1377 | function useOnEvent<THookType>(
1378 |    event: THookType, 
1379 |    handler: (arg0: HookArgs[THookType]) => void, 
1380 |    client?: ReflagClient): void
1381 | ```
1382 | 
1383 | Attach a callback handler to client events to act on changes. It automatically disposes itself on unmount.
1384 | 
1385 | #### Type Parameters
1386 | 
1387 | <table>
1388 | <thead>
1389 | <tr>
1390 | <th>Type Parameter</th>
1391 | </tr>
1392 | </thead>
1393 | <tbody>
1394 | <tr>
1395 | <td>
1396 | 
1397 | `THookType` *extends* keyof [`HookArgs`](../browser-sdk/globals.md#hookargs)
1398 | 
1399 | </td>
1400 | </tr>
1401 | </tbody>
1402 | </table>
1403 | 
1404 | #### Parameters
1405 | 
1406 | <table>
1407 | <thead>
1408 | <tr>
1409 | <th>Parameter</th>
1410 | <th>Type</th>
1411 | <th>Description</th>
1412 | </tr>
1413 | </thead>
1414 | <tbody>
1415 | <tr>
1416 | <td>
1417 | 
1418 | `event`
1419 | 
1420 | </td>
1421 | <td>
1422 | 
1423 | `THookType`
1424 | 
1425 | </td>
1426 | <td>
1427 | 
1428 | The event to listen to.
1429 | 
1430 | </td>
1431 | </tr>
1432 | <tr>
1433 | <td>
1434 | 
1435 | `handler`
1436 | 
1437 | </td>
1438 | <td>
1439 | 
1440 | (`arg0`: [`HookArgs`](../browser-sdk/globals.md#hookargs)\[`THookType`\]) => `void`
1441 | 
1442 | </td>
1443 | <td>
1444 | 
1445 | The function to call when the event is triggered.
1446 | 
1447 | </td>
1448 | </tr>
1449 | <tr>
1450 | <td>
1451 | 
1452 | `client`?
1453 | 
1454 | </td>
1455 | <td>
1456 | 
1457 | [`ReflagClient`](../browser-sdk/globals.md#reflagclient)
1458 | 
1459 | </td>
1460 | <td>
1461 | 
1462 | The Reflag client to listen to. If not provided, the client will be retrieved from the context.
1463 | 
1464 | </td>
1465 | </tr>
1466 | </tbody>
1467 | </table>
1468 | 
1469 | #### Returns
1470 | 
1471 | `void`
1472 | 
1473 | #### Example
1474 | 
1475 | ```ts
1476 | import { useOnEvent } from '@reflag/react-sdk';
1477 | 
1478 | useOnEvent("flagsUpdated", () => {
1479 |   console.log("flags updated");
1480 | });
1481 | ```
1482 | 
1483 | ***
1484 | 
1485 | ### useRequestFeedback()
1486 | 
1487 | ```ts
1488 | function useRequestFeedback(): (options: RequestFeedbackData) => void
1489 | ```
1490 | 
1491 | Returns a function to open up the feedback form
1492 | Note: When calling `useRequestFeedback`, user/company must already be set.
1493 | 
1494 | See [link](../../documents/browser-sdk/FEEDBACK.md) for more information
1495 | 
1496 | ```ts
1497 | const requestFeedback = useRequestFeedback();
1498 | reflag.requestFeedback({
1499 |   flagKey: "file-uploads",
1500 |   title: "How satisfied are you with file uploads?",
1501 | });
1502 | ```
1503 | 
1504 | #### Returns
1505 | 
1506 | `Function`
1507 | 
1508 | ##### Parameters
1509 | 
1510 | <table>
1511 | <thead>
1512 | <tr>
1513 | <th>Parameter</th>
1514 | <th>Type</th>
1515 | </tr>
1516 | </thead>
1517 | <tbody>
1518 | <tr>
1519 | <td>
1520 | 
1521 | `options`
1522 | 
1523 | </td>
1524 | <td>
1525 | 
1526 | [`RequestFeedbackData`](../browser-sdk/globals.md#requestfeedbackdata)
1527 | 
1528 | </td>
1529 | </tr>
1530 | </tbody>
1531 | </table>
1532 | 
1533 | ##### Returns
1534 | 
1535 | `void`
1536 | 
1537 | ***
1538 | 
1539 | ### useSendFeedback()
1540 | 
1541 | ```ts
1542 | function useSendFeedback(): (opts: UnassignedFeedback) => Promise<
1543 |   | undefined
1544 | | Response>
1545 | ```
1546 | 
1547 | Returns a function to manually send feedback collected from a user.
1548 | Note: When calling `useSendFeedback`, user/company must already be set.
1549 | 
1550 | See [link](../../documents/browser-sdk/FEEDBACK.md) for more information
1551 | 
1552 | ```ts
1553 | const sendFeedback = useSendFeedback();
1554 | sendFeedback({
1555 |   flagKey: "huddle";
1556 |   question: "How did you like the new huddle feature?";
1557 |   score: 5;
1558 |   comment: "I loved it!";
1559 | });
1560 | ```
1561 | 
1562 | #### Returns
1563 | 
1564 | `Function`
1565 | 
1566 | ##### Parameters
1567 | 
1568 | <table>
1569 | <thead>
1570 | <tr>
1571 | <th>Parameter</th>
1572 | <th>Type</th>
1573 | </tr>
1574 | </thead>
1575 | <tbody>
1576 | <tr>
1577 | <td>
1578 | 
1579 | `opts`
1580 | 
1581 | </td>
1582 | <td>
1583 | 
1584 | [`UnassignedFeedback`](../browser-sdk/globals.md#unassignedfeedback)
1585 | 
1586 | </td>
1587 | </tr>
1588 | </tbody>
1589 | </table>
1590 | 
1591 | ##### Returns
1592 | 
1593 | [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<
1594 |   \| `undefined`
1595 |   \| [`Response`](https://developer.mozilla.org/docs/Web/API/Response)\>
1596 | 
1597 | ***
1598 | 
1599 | ### useTrack()
1600 | 
1601 | ```ts
1602 | function useTrack(): (eventName: string, attributes?: 
1603 |   | null
1604 |   | Record<string, any>) => Promise<
1605 |   | undefined
1606 | | Response>
1607 | ```
1608 | 
1609 | Returns a function to send an event when a user performs an action
1610 | Note: When calling `useTrack`, user/company must already be set.
1611 | 
1612 | ```ts
1613 | const track = useTrack();
1614 | track("Started Huddle", { button: "cta" });
1615 | ```
1616 | 
1617 | #### Returns
1618 | 
1619 | `Function`
1620 | 
1621 | ##### Parameters
1622 | 
1623 | <table>
1624 | <thead>
1625 | <tr>
1626 | <th>Parameter</th>
1627 | <th>Type</th>
1628 | </tr>
1629 | </thead>
1630 | <tbody>
1631 | <tr>
1632 | <td>
1633 | 
1634 | `eventName`
1635 | 
1636 | </td>
1637 | <td>
1638 | 
1639 | `string`
1640 | 
1641 | </td>
1642 | </tr>
1643 | <tr>
1644 | <td>
1645 | 
1646 | `attributes`?
1647 | 
1648 | </td>
1649 | <td>
1650 | 
1651 |  \| `null` \| [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)\<`string`, `any`\>
1652 | 
1653 | </td>
1654 | </tr>
1655 | </tbody>
1656 | </table>
1657 | 
1658 | ##### Returns
1659 | 
1660 | [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<
1661 |   \| `undefined`
1662 |   \| [`Response`](https://developer.mozilla.org/docs/Web/API/Response)\>
1663 | 
1664 | ***
1665 | 
1666 | ### useUpdateCompany()
1667 | 
1668 | ```ts
1669 | function useUpdateCompany(): (opts: {}) => Promise<void>
1670 | ```
1671 | 
1672 | Returns a function to update the current company's information.
1673 | For example, if the company changed plan or opted into a beta-feature.
1674 | 
1675 | The method returned is a function which returns a promise that
1676 | resolves when after the features have been updated as a result
1677 | of the company update.
1678 | 
1679 | ```ts
1680 | const updateCompany = useUpdateCompany();
1681 | updateCompany({ plan: "enterprise" }).then(() => console.log("Flags updated"));
1682 | ```
1683 | 
1684 | #### Returns
1685 | 
1686 | `Function`
1687 | 
1688 | ##### Parameters
1689 | 
1690 | <table>
1691 | <thead>
1692 | <tr>
1693 | <th>Parameter</th>
1694 | <th>Type</th>
1695 | </tr>
1696 | </thead>
1697 | <tbody>
1698 | <tr>
1699 | <td>
1700 | 
1701 | `opts`
1702 | 
1703 | </td>
1704 | <td>
1705 | 
1706 | \{\}
1707 | 
1708 | </td>
1709 | </tr>
1710 | </tbody>
1711 | </table>
1712 | 
1713 | ##### Returns
1714 | 
1715 | [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<`void`\>
1716 | 
1717 | ***
1718 | 
1719 | ### useUpdateOtherContext()
1720 | 
1721 | ```ts
1722 | function useUpdateOtherContext(): (opts: {}) => Promise<void>
1723 | ```
1724 | 
1725 | Returns a function to update the "other" context information.
1726 | For example, if the user changed workspace, you can set the workspace id here.
1727 | 
1728 | The method returned is a function which returns a promise that
1729 | resolves when after the features have been updated as a result
1730 | of the update to the "other" context.
1731 | 
1732 | ```ts
1733 | const updateOtherContext = useUpdateOtherContext();
1734 | updateOtherContext({ workspaceId: newWorkspaceId })
1735 |   .then(() => console.log("Flags updated"));
1736 | ```
1737 | 
1738 | #### Returns
1739 | 
1740 | `Function`
1741 | 
1742 | ##### Parameters
1743 | 
1744 | <table>
1745 | <thead>
1746 | <tr>
1747 | <th>Parameter</th>
1748 | <th>Type</th>
1749 | </tr>
1750 | </thead>
1751 | <tbody>
1752 | <tr>
1753 | <td>
1754 | 
1755 | `opts`
1756 | 
1757 | </td>
1758 | <td>
1759 | 
1760 | \{\}
1761 | 
1762 | </td>
1763 | </tr>
1764 | </tbody>
1765 | </table>
1766 | 
1767 | ##### Returns
1768 | 
1769 | [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<`void`\>
1770 | 
1771 | ***
1772 | 
1773 | ### useUpdateUser()
1774 | 
1775 | ```ts
1776 | function useUpdateUser(): (opts: {}) => Promise<void>
1777 | ```
1778 | 
1779 | Returns a function to update the current user's information.
1780 | For example, if the user changed role or opted into a beta-feature.
1781 | 
1782 | The method returned is a function which returns a promise that
1783 | resolves when after the features have been updated as a result
1784 | of the user update.
1785 | 
1786 | ```ts
1787 | const updateUser = useUpdateUser();
1788 | updateUser({ optInHuddles: "true" }).then(() => console.log("Flags updated"));
1789 | ```
1790 | 
1791 | #### Returns
1792 | 
1793 | `Function`
1794 | 
1795 | ##### Parameters
1796 | 
1797 | <table>
1798 | <thead>
1799 | <tr>
1800 | <th>Parameter</th>
1801 | <th>Type</th>
1802 | </tr>
1803 | </thead>
1804 | <tbody>
1805 | <tr>
1806 | <td>
1807 | 
1808 | `opts`
1809 | 
1810 | </td>
1811 | <td>
1812 | 
1813 | \{\}
1814 | 
1815 | </td>
1816 | </tr>
1817 | </tbody>
1818 | </table>
1819 | 
1820 | ##### Returns
1821 | 
1822 | [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<`void`\>
1823 | 
```

