This is page 5 of 7. Use http://codebase.md/bucketco/docs/_media/.gitbook/assets/Screenshot%202025-09-12%20at%2011.50.41.png?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 [email protected]
│ │ ├── CleanShot 2024-11-22 at 8 [email protected]
│ │ ├── CleanShot 2024-11-22 at 8 [email protected]
│ │ ├── CleanShot 2024-11-25 at 9 [email protected]
│ │ ├── CleanShot 2024-11-25 at 9 [email protected]
│ │ ├── CleanShot 2024-11-25 at 9 [email protected]
│ │ ├── CleanShot 2024-11-27 at 10 [email protected]
│ │ ├── CleanShot 2024-11-27 at 10 [email protected]
│ │ ├── CleanShot 2024-11-27 at 10 [email protected]
│ │ ├── CleanShot 2024-11-27 at 10 [email protected]
│ │ ├── CleanShot 2025-01-07 at 1 [email protected]
│ │ ├── CleanShot 2025-01-07 at 1 [email protected]
│ │ ├── CleanShot 2025-01-07 at 1 [email protected]
│ │ ├── CleanShot 2025-01-07 at 12 [email protected]
│ │ ├── CleanShot 2025-01-07 at 12 .39.12@2x (1).png
│ │ ├── CleanShot 2025-01-07 at 12 [email protected]
│ │ ├── CleanShot 2025-01-09 at 10 [email protected]
│ │ ├── CleanShot 2025-01-09 at 11 .11.54@2x (1).png
│ │ ├── CleanShot 2025-01-09 at 11 [email protected]
│ │ ├── CleanShot 2025-01-09 at 9 [email protected]
│ │ ├── CleanShot 2025-01-23 at 1 [email protected]
│ │ ├── CleanShot 2025-01-23 at 1 [email protected]
│ │ ├── CleanShot 2025-01-23 at 1 [email protected]
│ │ ├── CleanShot 2025-01-23 at 2 [email protected]
│ │ ├── CleanShot 2025-05-09 at 1 [email protected]
│ │ ├── CleanShot 2025-10-09 at 10 [email protected]
│ │ ├── 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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 | ‐
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 |
```
