This is page 5 of 7. Use http://codebase.md/bucketco/docs/_media/integrations/.gitbook/assets/CleanShot%202025-10-09%20at%2010%E2%80%[email protected]?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 | ```
