This is page 4 of 5. Use http://codebase.md/bucketco/docs/_media/.gitbook/assets/Screenshot%202025-09-12%20at%2015.33.57.png?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
--------------------------------------------------------------------------------
/.gitbook/assets/segment (1).svg:
--------------------------------------------------------------------------------
```
<svg width="512" height="290" viewBox="0 0 512 290" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="512" height="288.257" transform="translate(0 0.871315)" fill="white"/>
<g clip-path="url(#clip0_1_40)">
<path d="M149.125 138.981H107.839C106.262 138.981 104.974 137.703 104.974 136.191V131.366C104.974 129.828 106.288 128.576 107.839 128.576H149.387C150.964 128.576 152.252 129.854 152.252 131.366V136.191C151.989 137.729 150.675 138.981 149.125 138.981Z" fill="#6ADDB2"/>
<path d="M76.3029 159.842C74.7261 159.842 73.4121 158.538 73.4121 156.974V152.019C73.4121 150.715 74.7261 149.412 76.3029 149.412H117.983C119.56 149.412 120.874 150.715 120.874 152.28V157.235C120.611 158.538 119.297 159.842 117.72 159.842H76.3029Z" fill="#6ADDB2"/>
<path d="M89.0486 178.096C91.9394 178.096 94.3046 175.749 94.3046 172.881C94.3046 170.012 91.9394 167.665 89.0486 167.665C86.1578 167.665 83.7926 170.012 83.7926 172.881C83.7926 175.749 86.1578 178.096 89.0486 178.096Z" fill="#6ADDB2"/>
<path d="M136.353 120.727C139.243 120.727 141.609 118.38 141.609 115.512C141.609 112.643 139.243 110.296 136.353 110.296C133.462 110.296 131.097 112.643 131.097 115.512C131.097 118.38 133.462 120.727 136.353 120.727Z" fill="#6ADDB2"/>
<path d="M112.701 175.488C109.81 175.488 106.919 174.967 104.291 174.185C102.977 173.924 101.663 174.445 101.137 175.749L99.2978 180.704C98.7722 182.008 99.5606 183.572 101.137 184.094C104.817 185.398 108.759 185.919 112.701 185.919C129.783 185.919 144.499 175.749 151.069 161.146C151.595 159.842 151.069 158.017 149.493 157.495L144.499 155.67C143.185 155.148 141.871 155.67 141.346 156.974C136.353 167.926 125.578 175.488 112.701 175.488Z" fill="#6ADDB2"/>
<path d="M112.701 112.904C115.591 112.904 118.482 113.425 121.11 114.208C122.424 114.468 123.738 113.947 124.264 112.643L126.103 107.688C126.629 106.385 125.841 104.82 124.264 104.298C120.585 102.995 116.643 102.473 112.701 102.473C95.6187 102.473 80.9019 112.643 74.3319 127.246C73.8063 128.55 74.3319 130.375 75.9087 130.897L80.9019 132.722C82.2159 133.244 83.5299 132.722 84.0555 131.418C89.0487 120.466 99.8235 112.904 112.701 112.904Z" fill="#6ADDB2"/>
<path d="M185.128 178.122V172.568C189.438 176.792 194.405 179.009 199.714 179.009C204.208 179.009 206.783 176.871 206.783 173.507C206.783 169.282 202.683 168.813 197.979 168.291C191.909 167.587 184.603 166.674 184.603 158.799C184.603 152.202 190.043 148.368 197.217 148.368C204.391 148.368 208.596 150.741 211.461 152.932V158.434C207.782 154.601 202.946 152.697 197.401 152.645C192.382 152.645 189.937 154.966 189.937 158.33C189.937 162.215 194.195 162.789 198.925 163.311C205.048 164.015 212.249 165.058 212.249 173.089C212.249 179.296 207.466 183.39 199.976 183.39C192.487 183.39 188.597 181.069 185.155 178.122H185.128Z" fill="#121C2D"/>
<path d="M216.717 165.501C216.717 154.888 223.366 148.342 232.59 148.342C241.289 148.342 247.543 153.61 247.543 164.614V167.222H222.209C222.682 175.567 228.333 178.878 236.059 178.878C241.21 178.878 244.521 177.027 246.86 175.123V180C244.994 181.46 241.551 183.416 235.113 183.416C223.681 183.416 216.717 177.157 216.717 166.335V165.501ZM222.262 163.18H242.051C241.709 156.113 238.188 152.645 232.537 152.645C226.887 152.645 223.024 156.061 222.262 163.18Z" fill="#121C2D"/>
<path d="M250.828 189.022C250.828 185.267 253.745 182.529 260.578 182.06C260.631 182.06 260.683 182.008 260.683 181.956C260.683 181.903 260.631 181.851 260.578 181.851C254.56 181.851 252.352 180.391 252.352 177.496C252.352 174.837 255.164 172.333 261.997 172.281C262.05 172.281 262.102 172.229 262.102 172.177C262.102 172.125 262.05 172.072 261.997 172.072C256.032 171.212 252.536 167.04 252.536 160.729C252.536 153.323 258.265 148.395 266.675 148.395C270.591 148.395 272.457 148.968 274.953 148.968H283.994V153.375H277.056C279.263 154.94 280.682 157.939 280.682 161.25C280.682 167.744 275.61 172.959 266.964 172.959H264.862C260.184 172.959 257.74 173.95 257.74 175.671C257.74 177.522 259.369 177.809 265.571 177.809H271.826C279.815 177.809 283.862 179.843 283.862 185.632C283.862 191.421 278.843 196.011 266.228 196.011H265.414C254.271 196.011 250.881 193.221 250.881 189.048L250.828 189.022ZM278.501 186.415C278.501 183.285 275.926 182.477 270.67 182.477H265.125C258.476 182.477 256.189 184.85 256.189 187.588C256.189 190.092 258.712 191.813 265.887 191.813H266.517C275.269 191.813 278.475 189.726 278.475 186.415H278.501ZM275.4 160.859C275.4 155.983 272.299 152.176 266.649 152.176C260.999 152.176 257.845 155.54 257.845 160.859C257.845 165.501 260.946 169.021 266.649 169.021C272.352 169.021 275.4 165.501 275.4 160.859Z" fill="#121C2D"/>
<path d="M288.566 148.942H293.927V160.416C294.926 152.071 298.71 148.368 305.307 148.368C312.718 148.368 316.581 152.645 317.212 159.999C318.21 152.228 322.047 148.368 328.643 148.368C336.711 148.368 340.732 153.688 340.732 162.606V182.816H335.292V163.65C335.292 157.156 332.717 152.802 326.541 152.802C321.232 152.802 317.317 156.87 317.369 164.093V182.816H311.929V163.232C311.929 157.026 309.301 152.802 303.178 152.802C297.975 152.802 293.954 156.87 293.954 164.745V182.816H288.514V148.916L288.566 148.942Z" fill="#121C2D"/>
<path d="M346.303 165.501C346.303 154.888 352.952 148.342 362.177 148.342C370.875 148.342 377.13 153.61 377.13 164.614V167.222H351.796C352.269 175.567 357.919 178.878 365.646 178.878C370.796 178.878 374.108 177.027 376.447 175.123V180C374.581 181.46 371.138 183.416 364.699 183.416C353.268 183.416 346.303 177.157 346.303 166.335V165.501ZM351.849 163.18H371.637C371.296 156.113 367.774 152.645 362.124 152.645C356.474 152.645 352.611 156.061 351.849 163.18Z" fill="#121C2D"/>
<path d="M388.246 148.942V160.364C389.403 151.785 393.792 148.368 400.283 148.368C409.034 148.368 413.239 153.766 413.239 162.972V182.842H407.799V164.067C407.799 157.182 405.066 152.828 398.285 152.828C392.609 152.828 388.299 157.104 388.299 165.345V182.842H382.859V148.942H388.246Z" fill="#121C2D"/>
<path d="M422.41 172.568V153.323H416.235V149.438L418.101 149.385C421.648 149.203 422.778 147.873 423.067 143.596L423.251 141.093H427.85V148.916H439.466V153.323H427.85V172.385C427.85 176.792 429.9 178.748 433.921 178.748C436.023 178.748 438.126 178.279 439.466 177.418V181.643C438.126 182.503 435.734 183.259 432.397 183.259C425.511 183.259 422.41 179.948 422.41 172.542V172.568Z" fill="#121C2D"/>
<path d="M213.484 133.087L206.126 107.193V114.051C206.126 114.416 205.889 114.651 205.522 114.651H200.686V121.874C200.686 124.456 201.343 125.212 203.419 125.212C204.208 125.212 204.97 125.16 205.653 124.847C206.179 124.586 206.573 124.795 206.573 125.212V132.488C206.573 132.905 206.415 133.166 206.021 133.348C204.681 133.974 202.131 134.365 199.03 134.365C191.015 134.365 188.387 130.61 188.387 123.987V114.625H184.419C184.051 114.625 183.788 114.364 183.788 113.999V106.306C183.788 105.941 184.051 105.681 184.419 105.681H187.073C188.15 105.681 188.729 105.211 188.729 104.142V99.8133C188.729 99.4482 188.939 99.1353 189.307 99.031L199.582 95.7453C200.108 95.5888 200.423 95.7974 200.423 96.2668V105.42H216.769C217.137 105.42 217.348 105.576 217.453 105.994L219.844 118.432L222.236 105.994C222.288 105.628 222.551 105.42 222.919 105.42H233.878C234.246 105.42 234.508 105.628 234.561 105.994L237.031 118.432L239.475 105.994C239.58 105.576 239.791 105.42 240.159 105.42H261.734C262.102 105.42 262.365 105.681 262.365 106.046V132.957C262.365 133.322 262.102 133.583 261.734 133.583H250.644C250.276 133.583 250.014 133.322 250.014 132.957V107.193L242.971 133.087C242.865 133.452 242.603 133.609 242.182 133.609H232.117C231.749 133.609 231.591 133.452 231.486 133.087L228.254 120.857L224.916 133.087C224.811 133.452 224.653 133.609 224.285 133.609H214.22C213.8 133.609 213.537 133.452 213.432 133.087H213.484ZM250.014 102.395C250.014 102.76 250.276 103.021 250.644 103.021H261.734C262.102 103.021 262.365 102.76 262.365 102.395V96.319C262.365 95.9539 262.102 95.6931 261.734 95.6931H250.644C250.276 95.6931 250.014 95.9539 250.014 96.319V102.421V102.395ZM264.809 132.983C264.809 133.348 265.072 133.609 265.44 133.609H276.53C276.898 133.609 277.161 133.348 277.161 132.983V96.319C277.161 95.9539 276.898 95.6931 276.53 95.6931H265.44C265.072 95.6931 264.809 95.9539 264.809 96.319V133.009V132.983ZM279.605 132.983C279.605 133.348 279.868 133.609 280.236 133.609H291.299C291.667 133.609 291.93 133.348 291.93 132.983V106.098C291.93 105.733 291.667 105.472 291.299 105.472H280.236C279.868 105.472 279.605 105.733 279.605 106.098V133.009V132.983ZM279.605 102.395C279.605 102.76 279.868 103.021 280.236 103.021H291.299C291.667 103.021 291.93 102.76 291.93 102.395V96.319C291.93 95.9539 291.667 95.6931 291.299 95.6931H280.236C279.868 95.6931 279.605 95.9539 279.605 96.319V102.421V102.395ZM325.7 119.11V119.788C325.7 128.159 319.288 134.469 309.801 134.469C300.313 134.469 293.849 128.159 293.849 119.788V119.11C293.849 110.74 300.34 104.611 309.801 104.611C319.261 104.611 325.7 110.74 325.7 119.11ZM313.874 119.293C313.874 115.433 312.087 113.921 309.801 113.921C307.514 113.921 305.727 115.433 305.727 119.293V119.788C305.727 123.595 307.514 125.186 309.801 125.186C312.087 125.186 313.874 123.595 313.874 119.788V119.293Z" fill="#121C2D"/>
</g>
<defs>
<clipPath id="clip0_1_40">
<rect width="394.2" height="101.7" fill="white" transform="translate(62.9 94.65)"/>
</clipPath>
</defs>
</svg>
```
--------------------------------------------------------------------------------
/.gitbook/assets/aws-s3.svg:
--------------------------------------------------------------------------------
```
<svg width="512" height="289" viewBox="0 0 512 289" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
@media (prefers-color-scheme: dark) {
path { fill: white; }
}
</style>
<path d="M136.51 130.347C136.452 132.073 136.683 133.799 137.144 135.468C137.663 136.906 138.297 138.287 138.988 139.61C139.219 140.013 139.392 140.473 139.392 140.933C139.334 141.623 138.93 142.314 138.297 142.659L134.666 145.075C134.205 145.363 133.686 145.593 133.168 145.593C132.534 145.535 131.9 145.248 131.439 144.788C130.69 143.982 129.941 143.062 129.364 142.084C128.788 141.106 128.212 140.013 127.578 138.689C123.083 143.982 117.436 146.629 110.636 146.629C105.795 146.629 101.934 145.248 99.1101 142.487C96.2864 139.725 94.8457 136.043 94.8457 131.441C94.8457 126.55 96.5745 122.581 100.09 119.589C103.605 116.597 108.273 115.102 114.208 115.102C116.225 115.102 118.3 115.274 120.317 115.562C122.449 115.85 124.639 116.31 126.944 116.828V112.628C126.944 108.255 126.022 105.206 124.236 103.423C122.449 101.639 119.28 100.776 114.842 100.776C112.768 100.776 110.636 101.007 108.619 101.524C106.486 102.042 104.412 102.675 102.395 103.48C101.761 103.768 101.069 103.998 100.378 104.228C100.09 104.343 99.744 104.401 99.4559 104.401C98.6491 104.401 98.2457 103.826 98.2457 102.617V99.7984C98.1881 99.108 98.361 98.4176 98.6491 97.7848C99.1101 97.267 99.6287 96.8643 100.263 96.5766C102.568 95.426 104.988 94.563 107.524 93.9877C110.463 93.2398 113.517 92.8946 116.513 92.8946C123.371 92.8946 128.385 94.448 131.612 97.5546C134.839 100.661 136.395 105.379 136.395 111.707V130.347H136.51ZM113.113 139.092C115.13 139.092 117.147 138.747 119.049 138.056C121.181 137.309 123.025 136.043 124.524 134.375C125.446 133.339 126.137 132.073 126.483 130.693C126.886 129.082 127.059 127.356 127.059 125.687V123.271C125.33 122.868 123.544 122.523 121.758 122.293C119.971 122.063 118.127 121.948 116.341 121.948C112.48 121.948 109.656 122.696 107.754 124.249C105.852 125.802 104.93 127.989 104.93 130.865C104.93 133.569 105.622 135.583 107.063 136.963C108.503 138.344 110.463 139.092 113.113 139.092ZM159.388 145.305C158.639 145.363 157.832 145.19 157.198 144.73C156.622 144.097 156.161 143.349 155.988 142.487L142.446 98.0149C142.158 97.267 141.985 96.5191 141.927 95.7136C141.869 95.0233 142.33 94.3904 143.022 94.2754H149.015C150.11 94.2754 150.859 94.448 151.263 94.8507C151.666 95.2534 152.069 96.0013 152.415 97.0944L162.039 135.18L171.029 97.0944C171.317 95.9438 171.663 95.1959 172.124 94.8507C172.815 94.448 173.622 94.2178 174.429 94.2754H179.039C180.134 94.2754 180.883 94.448 181.344 94.8507C181.92 95.4835 182.324 96.2314 182.439 97.0944L191.544 135.64L201.514 97.0944C201.686 96.2314 202.09 95.4835 202.666 94.8507C203.358 94.448 204.107 94.2178 204.914 94.2754H210.273C210.964 94.1603 211.598 94.6781 211.714 95.3685V95.7136C211.714 96.0013 211.656 96.3465 211.598 96.6341C211.483 97.1519 211.368 97.6122 211.195 98.0724L197.307 142.544C196.961 143.695 196.558 144.442 196.097 144.788C195.463 145.19 194.656 145.421 193.907 145.363H188.951C187.856 145.363 187.107 145.19 186.646 144.788C186.07 144.155 185.666 143.349 185.551 142.487L176.618 105.379L167.744 142.429C167.629 143.292 167.225 144.097 166.649 144.73C165.957 145.19 165.151 145.363 164.344 145.305H159.388ZM233.439 146.859C230.442 146.859 227.446 146.514 224.564 145.823C221.683 145.133 219.436 144.385 217.937 143.522C217.188 143.177 216.554 142.601 216.151 141.911C215.92 141.393 215.805 140.875 215.805 140.3V137.366C215.805 136.158 216.266 135.583 217.13 135.583C217.476 135.583 217.822 135.64 218.168 135.755C218.513 135.87 219.032 136.101 219.608 136.331C221.625 137.251 223.758 137.884 225.947 138.344C228.195 138.804 230.5 139.035 232.805 139.035C236.436 139.035 239.259 138.402 241.219 137.136C243.12 135.985 244.273 133.914 244.215 131.671C244.273 130.175 243.696 128.736 242.659 127.643C241.622 126.55 239.663 125.572 236.839 124.652L228.483 122.063C224.276 120.74 221.164 118.783 219.263 116.195C217.418 113.778 216.381 110.902 216.381 107.853C216.324 105.609 216.842 103.423 217.937 101.467C218.974 99.6258 220.358 98.0149 222.086 96.7492C223.873 95.3685 225.89 94.3904 228.08 93.7576C230.442 93.0672 232.863 92.722 235.341 92.7796C236.608 92.7796 237.934 92.8371 239.202 93.0097C240.527 93.1823 241.737 93.4124 242.947 93.6425C244.158 93.8727 245.195 94.2178 246.232 94.563C247.097 94.8507 247.903 95.1959 248.652 95.5986C249.344 95.9438 249.92 96.404 250.381 97.0369C250.785 97.6122 250.958 98.245 250.9 98.9354V101.639C250.9 102.847 250.439 103.48 249.574 103.48C248.825 103.365 248.076 103.135 247.385 102.79C243.927 101.237 240.124 100.489 236.32 100.546C233.035 100.546 230.442 101.064 228.656 102.157C226.87 103.25 225.947 104.919 225.947 107.277C225.89 108.831 226.524 110.327 227.676 111.362C228.829 112.455 230.961 113.548 234.015 114.526L242.198 117.115C246.347 118.438 249.344 120.279 251.13 122.638C252.917 124.939 253.839 127.816 253.781 130.693C253.839 132.994 253.32 135.295 252.283 137.366C251.246 139.322 249.805 141.048 248.076 142.429C246.175 143.925 243.985 145.018 241.68 145.651C239.029 146.456 236.263 146.859 233.439 146.859Z" fill="black"/>
<path d="M244.33 174.818C225.371 188.798 197.825 196.22 174.14 196.22C140.947 196.22 111.039 183.966 88.4489 163.6C86.6625 161.989 88.2761 159.803 90.4083 161.068C114.842 175.221 144.981 183.793 176.157 183.793C198.632 183.678 220.876 179.133 241.564 170.446C244.734 169.008 247.442 172.517 244.33 174.818Z" fill="#FF9900"/>
<path d="M252.225 165.844C249.805 162.737 236.205 164.348 230.039 165.096C228.195 165.326 227.907 163.715 229.578 162.507C240.412 154.913 258.219 157.099 260.293 159.631C262.368 162.162 259.717 179.997 249.575 188.511C248.019 189.835 246.52 189.144 247.212 187.418C249.517 181.723 254.646 168.893 252.225 165.844Z" fill="#FF9900"/>
<path d="M353.13 157.445C353.706 158.595 354.57 159.573 355.608 160.321C356.705 161.069 357.913 161.644 359.239 161.932C360.621 162.277 362.062 162.45 363.503 162.45C364.599 162.45 365.635 162.335 366.731 162.22C367.825 162.047 368.922 161.76 369.957 161.242C370.936 160.782 371.801 160.091 372.436 159.286C373.127 158.365 373.473 157.272 373.415 156.122C373.473 154.856 372.953 153.648 372.089 152.785C371.11 151.864 369.901 151.174 368.634 150.656C367.075 150.023 365.464 149.563 363.791 149.16C362.006 148.758 360.16 148.24 358.316 147.722C356.416 147.262 354.57 146.686 352.727 145.996C350.998 145.363 349.327 144.443 347.887 143.292C346.446 142.199 345.293 140.818 344.429 139.207C343.506 137.366 343.047 135.353 343.103 133.282C343.047 130.923 343.623 128.564 344.832 126.493C345.928 124.594 347.425 122.926 349.213 121.66C351.056 120.337 353.13 119.417 355.32 118.784C357.569 118.151 359.872 117.863 362.177 117.863C364.77 117.863 367.308 118.151 369.842 118.726C372.206 119.244 374.394 120.222 376.355 121.603C378.257 122.926 379.813 124.652 380.907 126.666C382.059 128.967 382.636 131.556 382.577 134.145H371.745C371.686 132.821 371.342 131.556 370.765 130.405C370.245 129.427 369.495 128.622 368.575 128.046C367.596 127.471 366.558 127.068 365.464 126.838C364.194 126.608 362.927 126.493 361.659 126.493C360.736 126.493 359.816 126.608 358.951 126.781C358.087 126.953 357.222 127.299 356.473 127.759C355.723 128.219 355.147 128.852 354.688 129.542C354.167 130.348 353.938 131.268 353.994 132.246C353.938 133.109 354.167 133.914 354.57 134.662C355.147 135.468 355.896 136.043 356.819 136.388C358.316 137.021 359.872 137.539 361.43 137.942C363.388 138.459 365.982 139.15 369.151 139.955C370.072 140.128 371.398 140.473 373.127 140.991C374.914 141.509 376.584 142.314 378.14 143.35C379.869 144.5 381.368 145.938 382.462 147.665C383.673 149.505 384.306 151.807 384.306 154.683C384.306 156.927 383.847 159.113 382.924 161.184C382.001 163.198 380.619 164.981 378.89 166.362C376.931 167.916 374.682 169.066 372.262 169.756C369.266 170.619 366.211 171.022 363.1 170.964C360.333 170.964 357.625 170.619 354.917 169.929C352.382 169.296 350.019 168.203 347.945 166.65C345.928 165.154 344.256 163.255 343.103 161.012C341.836 158.48 341.26 155.719 341.375 152.9H352.209C352.15 154.568 352.497 156.064 353.13 157.445ZM405.688 140.243C406.896 140.185 408.049 139.898 409.145 139.438C410.181 139.035 411.104 138.345 411.795 137.481C412.545 136.504 412.889 135.295 412.833 134.087C412.833 131.959 412.142 130.29 410.701 129.197C409.316 128.046 407.587 127.471 405.802 127.471C403.209 127.471 401.307 128.334 399.981 130.002C398.599 131.843 397.964 134.087 398.081 136.388H388.457C388.513 133.972 388.975 131.613 389.839 129.37C390.645 127.356 391.798 125.458 393.353 123.904C394.911 122.351 396.696 121.143 398.713 120.395C400.96 119.532 403.324 119.129 405.688 119.129C407.705 119.129 409.722 119.417 411.68 119.992C413.639 120.567 415.426 121.488 417.04 122.639C418.596 123.789 419.922 125.285 420.901 126.953C421.936 128.737 422.456 130.808 422.398 132.879C422.456 135.123 421.821 137.366 420.669 139.265C419.46 141.164 417.617 142.487 415.426 143.062V143.235C417.961 143.752 420.266 145.133 421.88 147.204C423.494 149.333 424.3 151.922 424.241 154.511C424.3 156.927 423.782 159.343 422.745 161.472C421.765 163.485 420.381 165.211 418.652 166.592C416.867 167.973 414.906 169.066 412.718 169.699C410.469 170.389 408.108 170.792 405.744 170.792C403.15 170.85 400.557 170.389 398.081 169.584C395.891 168.836 393.873 167.628 392.201 166.074C390.53 164.464 389.263 162.565 388.457 160.379C387.534 157.905 387.131 155.316 387.187 152.67H396.811C396.87 153.935 397.043 155.258 397.446 156.467C397.793 157.617 398.369 158.653 399.116 159.631C399.866 160.494 400.73 161.242 401.768 161.702C402.977 162.277 404.247 162.508 405.57 162.508C407.705 162.565 409.778 161.817 411.333 160.436C412.889 159.056 413.697 157.1 413.697 154.683C413.697 152.785 413.35 151.346 412.601 150.368C411.91 149.391 410.93 148.643 409.778 148.182C408.569 147.722 407.299 147.492 406.032 147.434C404.65 147.377 403.382 147.319 402.171 147.319V140.243C403.324 140.358 404.535 140.358 405.688 140.243ZM304.032 93.8729H308.066V195.128H304.032V93.8729Z" fill="black"/>
</svg>
```
--------------------------------------------------------------------------------
/api/cli.md:
--------------------------------------------------------------------------------
```markdown
---
layout:
width: default
title:
visible: true
description:
visible: true
tableOfContents:
visible: true
outline:
visible: true
pagination:
visible: true
metadata:
visible: true
---
# CLI
Command-line interface for interacting with Reflag services. The CLI allows you to manage apps, features, authentication, and generate TypeScript types for your Reflag features. With this tool, you can streamline your feature flagging workflow directly from your terminal.
## Usage
Get started by installing the CLI locally in your project:
```bash
# npm
npm install --save-dev @reflag/cli
# yarn
yarn add --dev @reflag/cli
```
Then running the `new` command from your project's root directory, initializing the CLI, creating a feature, and generating the types all at once:
```bash
# npm
npx reflag new
# yarn
yarn reflag new
```
### Individual commands
Instead of running `new` you can call each step individually.
```bash
# Initialize Reflag in your project (if not already setup)
npx reflag init
# Create a new feature
npx reflag features create "My Feature"
# Generate TypeScript types for your features
npx reflag features types
```
## Configuration
The CLI creates a `reflag.config.json` file in your project directory when you run `reflag init`. This file contains all the necessary settings for your Reflag integration.
### Configuration File Structure
Here's a comprehensive list of configuration options available in the `reflag.config.json` file:
```json
{
"$schema": "https://unpkg.com/@reflag/cli@latest/schema.json",
"baseUrl": "https://app.reflag.com",
"apiUrl": "https://app.reflag.com/api",
"appId": "ap123456789",
"typesOutput": [
{
"path": "gen/features.d.ts",
"format": "react"
}
]
}
```
| Option | Description | Default |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- |
| `$schema` | Autocompletion for the config. `latest` can be replaced with a specific version. | "https://unpkg.com/@reflag/cli@latest/schema.json" |
| `baseUrl` | Base URL for Reflag services. | "https://app.reflag.com" |
| `apiUrl` | API URL for Reflag services (overrides baseUrl for API calls). | "https://app.reflag.com/api" |
| `appId` | Your Reflag application ID. | Required |
| `typesOutput` | Path(s) where TypeScript types will be generated. Can be a string or an array of objects with `path` and `format` properties. Available formats: `react` and `node`. | "gen/features.ts" with format "react" |
You can override these settings using command-line options for individual commands.
## Commands
### `reflag init`
Initialize a new Reflag configuration in your project. This creates a `reflag.config.json` file with your settings and prompts for any required information not provided via options.
```bash
npx reflag init [--overwrite]
```
Options:
* `--overwrite`: Overwrite existing configuration file if one exists.
* `--app-id <id>`: Set the application ID.
* `--key-format <format>`: Set the key format for features.
### `reflag new [featureName]`
All-in-one command to get started quickly. This command combines `init`, feature creation, and type generation in a single step. Use this for the fastest way to get up and running with Reflag.
```bash
npx reflag new "My Feature" [--app-id ap123456789] [--key my-feature] [--key-format custom] [--out gen/features.ts] [--format react]
```
Options:
* `--key`: Specific key for the feature.
* `--app-id`: App ID to use.
* `--key-format`: Format for feature keys (custom, snake, camel, etc.).
* `--out`: Path to generate TypeScript types.
* `--format`: Format of the generated types (react or node).
If you prefer more control over each step, you can use the individual commands (`init`, `features create`, `features types`) instead.
### `reflag login`
Log in to your Reflag account. This will authenticate your CLI for subsequent operations and store credentials securely.
```bash
npx reflag login
```
### `reflag logout`
Log out from your Reflag account, removing stored credentials.
```bash
npx reflag logout
```
### `reflag features`
Manage your Reflag features with the following subcommands.
#### `reflag features create [featureName]`
Create a new feature in your Reflag app. The command guides you through the feature creation process with interactive prompts if options are not provided.
```bash
npx reflag features create "My Feature" [--app-id ap123456789] [--key my-feature] [--key-format custom]
```
Options:
* `--key`: Specific key for the feature.
* `--app-id`: App ID to use.
* `--key-format`: Format for feature keys.
#### `reflag features list`
List all features for the current app. This helps you visualize what features are available and their current configurations.
```bash
npx reflag features list [--app-id ap123456789]
```
Options:
* `--app-id`: App ID to use.
#### `reflag features types`
Generate TypeScript types for your features. This ensures type safety when using Reflag features in your TypeScript/JavaScript applications.
```bash
npx reflag features types [--app-id ap123456789] [--out gen/features.ts] [--format react]
```
Options:
* `--app-id`: App ID to use.
* `--out`: Path to generate TypeScript types.
* `--format`: Format of the generated types (react or node).
### `reflag companies`
Commands for managing companies.
#### `reflag companies list`
List all companies in your app.
```bash
npx reflag companies list [--filter <text>] [--app-id ap123456789]
```
Options:
* `--filter`: Filter companies by name or ID.
* `--app-id`: App ID to use.
The command outputs a table with the following columns:
* `id`: Company ID.
* `name`: Company name (shows "(unnamed)" if not set).
* `users`: Number of users in the company.
* `lastSeen`: Date when the company was last active.
### `reflag companies features access`
Grant or revoke access to specific features for companies, segments, and users. If no feature key is provided, you'll be prompted to select one from a list.
```bash
npx reflag companies features access [--app-id ap123456789] [featureKey] [--enable|--disable] [--companies <id...>] [--segments <id...>] [--users <id...>]
```
Arguments:
* `featureKey`: Key of the feature to grant/revoke access to (optional, interactive selection if omitted).
Options:
* `--enable`: Enable the feature for the specified targets.
* `--disable`: Disable the feature for the specified targets.
* `--users`: User IDs to target. Can be specified multiple times.
* `--companies`: Company IDs to target. Can be specified multiple times.
* `--segments`: Segment IDs to target. Can be specified multiple times.
* `--app-id`: App ID to use.
At least one target (companies, segments, or users) must be specified. You must also specify either `--enable` or `--disable`, but not both.
Example:
```bash
# Enable feature for multiple companies and users
npx reflag companies features access my-feature --enable --companies comp_123 --companies comp_456 --users user_789
```
### `reflag apps`
Commands for managing Reflag apps.
## Global Options
These options can be used with any command:
* `--debug`: Enable debug mode for verbose output.
* `--base-url <url>`: Set the base URL for Reflag API.
* `--api-url <url>`: Set the API URL directly (overrides base URL).
* `--api-key <key>`: Reflag API key for non-interactive authentication.
* `--help`: Display help information for a command.
## AI-Assisted Development
Reflag provides powerful AI-assisted development capabilities through rules and Model Context Protocol (MCP). These features help your AI development tools better understand your features and provide more accurate assistance.
### Reflag Rules (Recommended)
The `rules` command helps you set up AI-specific rules for your project. These rules enable AI tools to better understand how to work with Reflag and feature flags and how they should be used in your codebase.
```bash
npx reflag rules [--format <cursor|copilot>] [--yes]
```
Options:
* `--format`: Format to add rules in:
* `cursor`: Adds rules to `.cursor/rules/reflag.mdc` for Cursor IDE integration.
* `copilot`: Adds rules to `.github/copilot-instructions.md` for GitHub Copilot integration.
* `--yes`: Skip confirmation prompts and overwrite existing files without asking.
This command will add rules to your project that provide AI tools with context about how to setup and use Reflag feature flags. For the copilot format, the rules will be added to a dedicated section in the file, allowing you to maintain other copilot instructions alongside Reflag's rules.
## Model Context Protocol
The Model Context Protocol (MCP) is an open protocol that provides a standardized way to connect AI models to different data sources and tools. In the context of Reflag, MCP enables your code editor to understand your feature flags, their states, and their relationships within your codebase. This creates a seamless bridge between your feature management workflow and AI-powered development tools. The MCP server is hosted by Reflag, so it's very easy to get started.
_**Note: The Reflag `mcp` CLI command was previously used for a \_local**_** server. However, in recent versions of the Reflag CLI, the `mcp` command has been repurposed to help you connect to the new remote MCP server.**
### Setting up MCP
The `mcp` command helps you configure your editor or AI client to connect with Reflag's remote MCP server. This allows your AI tools to understand your feature flags and provide more contextual assistance.
```bash
npx reflag mcp [--app-id <id>] [--editor <editor>] [--scope <local|global>]
```
Options:
* `--app-id`: App ID to use for the MCP connection.
* `--editor`: The editor/client to configure:
* `cursor`: [Cursor IDE](https://www.cursor.com/)
* `vscode`: [Visual Studio Code](https://code.visualstudio.com/)
* `claude`: [Claude Desktop](https://claude.ai/download)
* `windsurf`: [Windsurf](https://windsurf.com/editor)
* `--scope`: Whether to configure settings globally or locally for the project.
The command will guide you through:
1. Selecting which editor/client to configure.
2. Choosing which Reflag app to connect to.
3. Deciding between global or project-local configuration.
4. Setting up the appropriate configuration file for your chosen editor .
_**Note: The setup uses**_ [_**mcp-remote**_](https://github.com/geelen/mcp-remote) _**as a compatibility layer allowing the remote hosted Reflag MCP server to work with all editors/clients that support MCP STDIO servers. If your editor/client supports HTTP Streaming with OAuth you can connect to the Reflag MCP server directly.**_
## Using in CI/CD Pipelines (Beta)
The Reflag CLI is designed to work seamlessly in CI/CD pipelines. For automated environments where interactive login is not possible, use the `--api-key` option, or specify the API key in `REFLAG_API_KEY` environment variable.
```bash
# Generate types in CI/CD
npx reflag apps list --api-key $REFLAG_API_KEY
```
**Important restrictions:**
* When using `--api-key`, the `login` and `logout` commands are disabled.
* API keys bypass all interactive authentication flows.
* Only _read-only_ access to Reflag API is granted at the moment.
* API keys are bound to one app only. Commands such as `apps list` will only return the bound app.
* Store API keys securely using your CI/CD platform's secret management.
Example CI workflow:
```yaml
# GitHub Actions example
- name: Generate types
run: npx reflag features types --api-key ${{ secrets.REFLAG_API_KEY }}
# GitHub Actions example (using environment):
- name: Generate types (environment)
run: npx reflag features types
env:
REFLAG_API_KEY: ${{ secrets.REFLAG_CI_API_KEY }}
```
## Development
```bash
# Build the CLI
yarn build
# Run the CLI locally
yarn reflag [command]
# Lint and format code
yarn lint
yarn format
```
## Requirements
* Node.js >=18.0.0
## License
> MIT License Copyright (c) 2025 Bucket ApS
```
--------------------------------------------------------------------------------
/sdk/documents/browser-sdk/FEEDBACK.md:
--------------------------------------------------------------------------------
```markdown
---
layout:
visible: true
title:
visible: true
description:
visible: false
tableOfContents:
visible: true
outline:
visible: true
pagination:
visible: true
---
# Reflag Feedback UI
The Reflag Browser SDK includes a UI you can use to collect feedback from user
about particular flags.
## Global feedback configuration
The Reflag Browser SDK feedback UI is configured with reasonable defaults,
positioning itself as a [dialog](#dialog) in the lower right-hand corner of
the viewport, displayed in English, and with a [light-mode theme](#custom-styling).
These settings can be overwritten when initializing the Reflag Browser SDK:
```typescript
const reflag = new ReflagClient({
publishableKey: "reflag-publishable-key",
user: { id: "42" },
feedback: {
ui: {
position: POSITION_CONFIG, // See positioning section
translations: TRANSLATION_KEYS, // See internationalization section
// Enable automated feedback surveys. Default: `true`
enableAutoFeedback: boolean,
/**
* Do your own feedback prompt handling or override
* default settings at runtime.
*/
autoFeedbackHandler: (promptMessage, handlers) => {
// See Automated Feedback Surveys section
},
},
},
});
```
See also:
- [Positioning and behavior](#positioning-and-behavior) for the position option,
- [Static language configuration](#static-language-configuration) if you want to translate the feedback UI,
- [Automated feedback surveys](#automated-feedback-surveys) to override default configuration.
## Automated feedback surveys
Automated feedback surveys are enabled by default.
When automated feedback surveys are enabled, the Reflag Browser SDK
will open and maintain a connection to the Reflag service. When a user
triggers an event tracked by a flag and is eligible to be prompted
for feedback, the Reflag service will send a request to the SDK instance.
By default, this request will open up the Reflag feedback UI in the user's
browser, but you can intercept the request and override this behavior.
The live connection for automated feedback is established when the
`ReflagClient` is initialized.
### Disabling automated feedback surveys
You can disable automated collection in the `ReflagClient` constructor:
```typescript
const reflag = new ReflagClient({
publishableKey: "reflag-publishable-key",
user: { id: "42" },
feedback: {
enableAutoFeedback: false,
},
});
```
### Overriding prompt event defaults
If you are not satisfied with the default UI behavior when an automated prompt
event arrives, you can can [override the global defaults](#global-feedback-configuration)
or intercept and override settings at runtime like this:
```javascript
const reflag = new ReflagClient({
publishableKey: "reflag-publishable-key",
user: { id: "42" },
feedback: {
autoFeedbackHandler: (promptMessage, handlers) => {
// Pass your overrides here. Everything is optional
handlers.openFeedbackForm({
title: promptMessage.question,
position: POSITION_CONFIG, // See positioning section
translations: TRANSLATION_KEYS, // See internationalization section
// Trigger side effects with the collected data,
// for example posting it back into your own CRM
onAfterSubmit: (feedback) => {
storeFeedbackInCRM({
score: feedback.score,
comment: feedback.comment,
});
},
});
},
},
});
```
See also:
- [Positioning and behavior](#positioning-and-behavior) for the position option.
- [Runtime language configuration](#runtime-language-configuration) if you want
to translate the feedback UI.
- [Use your own UI to collect feedback](#using-your-own-ui-to-collect-feedback) if
the feedback UI doesn't match your design.
## Manual feedback collection
To open up the feedback collection UI, call `reflagClient.requestFeedback(options)`
with the appropriate options. This approach is particularly beneficial if you wish
to retain manual control over feedback collection from your users while leveraging
the convenience of the Reflag feedback UI to reduce the amount of code you need
to maintain.
Examples of this could be if you want the click of a `give us feedback`-button
or the end of a specific user flow, to trigger a pop-up displaying the feedback
user interface.
### reflagClient.requestFeedback() options
Minimal usage with defaults:
```javascript
reflagClient.requestFeedback({
flagKey: "reflag-flag-key",
title: "How satisfied are you with file uploads?",
});
```
All options:
```javascript
reflagClient.requestFeedback({
flagKey: "reflag-flag-key", // [Required]
userId: "your-user-id", // [Optional] if user persistence is
// enabled (default in browsers),
companyId: "users-company-or-account-id", // [Optional]
title: "How satisfied are you with file uploads?" // [Optional]
position: POSITION_CONFIG, // [Optional] see the positioning section
translations: TRANSLATION_KEYS // [Optional] see the internationalization section
// [Optional] trigger side effects with the collected data,
// for example sending the feedback to your own CRM
onAfterSubmit: (feedback) => {
storeFeedbackInCRM({
score: feedback.score,
comment: feedback.comment
})
}
})
```
See also:
- [Positioning and behavior](#positioning-and-behavior) for the position option.
- [Runtime language configuration](#runtime-language-configuration) if
you want to translate the feedback UI.
## Positioning and behavior
The feedback UI can be configured to be placed and behave in 3 different ways:
### Positioning configuration
#### Modal
A modal overlay with a backdrop that blocks interaction with the underlying
page. It can be dismissed with the keyboard shortcut `<ESC>` or the dedicated
close button in the top right corner. It is always centered on the page, capturing
focus, and making it the primary interface the user needs to interact with.
Using a modal is the strongest possible push for feedback. You are interrupting the
user's normal flow, which can cause annoyance. A good use-case for the modal is
when the user finishes a linear flow that they don't perform often, for example
setting up a new account.
```javascript
position: {
type: "MODAL";
}
```
#### Dialog
A dialog that appears in a specified corner of the viewport, without limiting the
user's interaction with the rest of the page. It can be dismissed with the dedicated
close button, but will automatically disappear after a short time period if the user
does not interact with it.
Using a dialog is a soft push for feedback. It lets the user continue their work
with a minimal amount of intrusion. The user can opt-in to respond but is not
required to. A good use case for this behavior is when a user uses a flag where
the expected outcome is predictable, possibly because they have used it multiple
times before. For example: Uploading a file, switching to a different view of a
visualization, visiting a specific page, or manipulating some data.
The default feedback UI behavior is a dialog placed in the bottom right corner of
the viewport.
```typescript
position: {
type: "DIALOG";
placement: "top-left" | "top-right" | "bottom-left" | "bottom-right";
offset?: {
x?: string | number; // e.g. "-5rem", "10px" or 10 (pixels)
y?: string | number;
}
}
```
#### Popover
A popover that is anchored relative to a DOM-element (typically a button). It can
be dismissed by clicking outside the popover or by pressing the dedicated close button.
You can use the popover mode to implement your own button to collect feedback manually.
```typescript
type Position = {
type: "POPOVER";
anchor: DOMElement;
};
```
Popover feedback button example:
```html
<button id="feedbackButton">Tell us what you think</button>
<script>
const button = document.getElementById("feedbackButton");
button.addEventListener("click", (e) => {
reflagClient.requestFeedback({
flagKey: "reflag-flag-key",
userId: "your-user-id",
title: "How do you like the popover?",
position: {
type: "POPOVER",
anchor: e.currentTarget,
},
});
});
</script>
```
## Internationalization (i18n)
By default, the feedback UI is written in English. However, you can supply your own
translations by passing an object in the options to either or both of the
`new ReflagClient(options)` or `reflagClient.requestFeedback(options)` calls.
These translations will replace the English ones used by the feedback interface.
See examples below.
See [default English localization keys](https://github.com/reflagcom/javascript/tree/main/packages/browser-sdk/src/feedback/ui/config/defaultTranslations.tsx)
for a reference of what translation keys can be supplied.
### Static language configuration
If you know the language at page load, you can configure your translation keys while
initializing the Reflag Browser SDK:
```typescript
new ReflagClient({
publishableKey: "my-publishable-key",
feedback: {
ui: {
translations: {
DefaultQuestionLabel:
"Dans quelle mesure êtes-vous satisfait de cette fonctionnalité ?",
QuestionPlaceholder:
"Comment pouvons-nous améliorer cette fonctionnalité ?",
ScoreStatusDescription: "Choisissez une note et laissez un commentaire",
ScoreStatusLoading: "Chargement...",
ScoreStatusReceived: "La note a été reçue !",
ScoreVeryDissatisfiedLabel: "Très insatisfait",
ScoreDissatisfiedLabel: "Insatisfait",
ScoreNeutralLabel: "Neutre",
ScoreSatisfiedLabel: "Satisfait",
ScoreVerySatisfiedLabel: "Très satisfait",
SuccessMessage: "Merci d'avoir envoyé vos commentaires!",
SendButton: "Envoyer",
},
},
},
});
```
### Runtime language configuration
If you only know the user's language after the page has loaded, you can provide
translations to either the `reflagClient.requestFeedback(options)` call or
the `autoFeedbackHandler` option before the feedback interface opens.
See examples below.
```typescript
reflagClient.requestFeedback({
... // Other options
translations: {
// your translation keys
}
})
```
### Translations
When you are collecting feedback through the Reflag automation, you can intercept
the default prompt handling and override the defaults.
If you set the prompt question in the Reflag app to be one of your own translation
keys, you can even get a translated version of the question you want to ask your
customer in the feedback UI.
```javascript
new ReflagClient({
publishableKey: "reflag-publishable-key",
feedback: {
autoFeedbackHandler: (message, handlers) => {
const translatedQuestion =
i18nLookup[message.question] ?? message.question;
handlers.openFeedbackForm({
title: translatedQuestion,
translations: {
// your static translation keys
},
});
},
},
});
```
## Custom styling
You can adapt parts of the look of the Reflag feedback UI by applying CSS custom
properties to your page in your CSS `:root`-scope.
For example, a dark mode theme might look like this:
```css
:root {
--reflag-feedback-dialog-background-color: #1e1f24;
--reflag-feedback-dialog-color: rgba(255, 255, 255, 0.92);
--reflag-feedback-dialog-secondary-color: rgba(255, 255, 255, 0.3);
--reflag-feedback-dialog-border: rgba(255, 255, 255, 0.16);
--reflag-feedback-dialog-primary-button-background-color: #655bfa;
--reflag-feedback-dialog-primary-button-color: white;
--reflag-feedback-dialog-input-border-color: rgba(255, 255, 255, 0.16);
--reflag-feedback-dialog-input-focus-border-color: rgba(255, 255, 255, 0.3);
--reflag-feedback-dialog-error-color: #f56565;
--reflag-feedback-dialog-rating-1-color: #ed8936;
--reflag-feedback-dialog-rating-1-background-color: #7b341e;
--reflag-feedback-dialog-rating-2-color: #dd6b20;
--reflag-feedback-dialog-rating-2-background-color: #652b19;
--reflag-feedback-dialog-rating-3-color: #787c91;
--reflag-feedback-dialog-rating-3-background-color: #3e404c;
--reflag-feedback-dialog-rating-4-color: #38a169;
--reflag-feedback-dialog-rating-4-background-color: #1c4532;
--reflag-feedback-dialog-rating-5-color: #48bb78;
--reflag-feedback-dialog-rating-5-background-color: #22543d;
--reflag-feedback-dialog-submitted-check-background-color: #38a169;
--reflag-feedback-dialog-submitted-check-color: #ffffff;
}
```
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).
## Using your own UI to collect feedback
You may have very strict design guidelines for your app and maybe the Reflag feedback
UI doesn't quite work for you. In this case, you can implement your own feedback
collection mechanism, which follows your own design guidelines. This is the data
type you need to collect:
```typescript
type DataToCollect = {
// Customer satisfaction score
score?: 1 | 2 | 3 | 4 | 5;
// The comment.
comment?: string;
};
```
Either `score` or `comment` must be defined in order to pass validation in the
Reflag API.
### Manual feedback collection with custom UI
Examples of a HTML-form that collects the relevant data can be found
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).
Once you have collected the feedback data, pass it along to `reflagClient.feedback()`:
```javascript
reflagClient.feedback({
flagKey: "reflag-flag-key",
userId: "your-user-id",
score: 5,
comment: "Best thing I've ever tried!",
});
```
### Intercepting automated feedback survey events
When using automated feedback surveys, the Reflag service will, when specified,
send a feedback prompt message to your user's instance of the Reflag Browser SDK.
This will result in the feedback UI being opened.
You can intercept this behavior and open your own custom feedback collection form:
```typescript
new ReflagClient({
publishableKey: "reflag-publishable-key",
feedback: {
autoFeedbackHandler: async (promptMessage, handlers) => {
// This opens your custom UI
customFeedbackCollection({
// The question configured in the Reflag UI for the flag
question: promptMessage.question,
// When the user successfully submits feedback data.
// Use this instead of `reflagClient.feedback()`, otherwise
// the feedback prompt handler will keep being called
// with the same prompt message
onFeedbackSubmitted: (feedback) => {
handlers.reply(feedback);
},
// When the user closes the custom feedback form
// without leaving any response.
// It is important to feed this back, otherwise
// the feedback prompt handler will keep being called
// with the same prompt message
onFeedbackDismissed: () => {
handlers.reply(null);
},
});
},
},
});
```
```
--------------------------------------------------------------------------------
/sdk/@reflag/vue-sdk/globals.md:
--------------------------------------------------------------------------------
```markdown
---
layout:
visible: true
title:
visible: true
description:
visible: false
tableOfContents:
visible: true
outline:
visible: true
pagination:
visible: true
---
# @reflag/vue-sdk
## Interfaces
### CheckEvent
Event representing checking the flag evaluation result
#### Properties
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="action"></a> `action`
</td>
<td>
`"check-is-enabled"` \| `"check-config"`
</td>
<td>
`check-is-enabled` means `isEnabled` was checked, `check-config` means `config` was checked.
</td>
</tr>
<tr>
<td>
<a id="key"></a> `key`
</td>
<td>
`string`
</td>
<td>
Flag key.
</td>
</tr>
<tr>
<td>
<a id="missingcontextfields"></a> `missingContextFields?`
</td>
<td>
`string`[]
</td>
<td>
Missing context fields.
</td>
</tr>
<tr>
<td>
<a id="ruleevaluationresults"></a> `ruleEvaluationResults?`
</td>
<td>
`boolean`[]
</td>
<td>
Rule evaluation results.
</td>
</tr>
<tr>
<td>
<a id="value"></a> `value?`
</td>
<td>
\| `boolean` \| \{ `key`: `string`; `payload`: `any`; \}
</td>
<td>
Result of flag or configuration evaluation.
If `action` is `check-is-enabled`, this is the result of the flag evaluation and `value` is a boolean.
If `action` is `check-config`, this is the result of the configuration evaluation.
</td>
</tr>
<tr>
<td>
<a id="version"></a> `version?`
</td>
<td>
`number`
</td>
<td>
Version of targeting rules.
</td>
</tr>
</tbody>
</table>
***
### CompanyContext
Context is a set of key-value pairs.
This is used to determine if feature targeting matches and to track events.
Id should always be present so that it can be referenced to an existing company.
#### Indexable
```ts
[key: string]: undefined | string | number
```
#### Properties
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="id"></a> `id`
</td>
<td>
`undefined` \| `string` \| `number`
</td>
<td>
Company id
</td>
</tr>
<tr>
<td>
<a id="name"></a> `name?`
</td>
<td>
`string`
</td>
<td>
Company name
</td>
</tr>
</tbody>
</table>
***
### Flag\<TConfig\>
#### Type Parameters
<table>
<thead>
<tr>
<th>Type Parameter</th>
<th>Default type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`TConfig` *extends* [`FlagType`](globals.md#flagtype)\[`"config"`\]
</td>
<td>
[`EmptyFlagRemoteConfig`](globals.md#emptyflagremoteconfig)
</td>
</tr>
</tbody>
</table>
#### Properties
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="config"></a> `config`
</td>
<td>
`Ref`\< \| [`EmptyFlagRemoteConfig`](globals.md#emptyflagremoteconfig) \| \{ `key`: `string`; \} & `TConfig`, \| [`EmptyFlagRemoteConfig`](globals.md#emptyflagremoteconfig) \| \{ `key`: `string`; \} & `TConfig`\>
</td>
</tr>
<tr>
<td>
<a id="isenabled"></a> `isEnabled`
</td>
<td>
`Ref`\<`boolean`, `boolean`\>
</td>
</tr>
<tr>
<td>
<a id="isloading"></a> `isLoading`
</td>
<td>
`Ref`\<`boolean`, `boolean`\>
</td>
</tr>
<tr>
<td>
<a id="key-1"></a> `key`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
<a id="requestfeedback"></a> `requestFeedback`
</td>
<td>
(`opts`: [`RequestFlagFeedbackOptions`](globals.md#requestflagfeedbackoptions)) => `void`
</td>
</tr>
</tbody>
</table>
#### Methods
##### track()
```ts
track():
| undefined
| Promise<
| undefined
| Response>
```
###### Returns
\| `undefined`
\| [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<
\| `undefined`
\| [`Response`](https://developer.mozilla.org/docs/Web/API/Response)\>
***
### Flags
***
### UserContext
Context is a set of key-value pairs.
This is used to determine if feature targeting matches and to track events.
Id should always be present so that it can be referenced to an existing user.
#### Indexable
```ts
[key: string]: undefined | string | number
```
#### Properties
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="email"></a> `email?`
</td>
<td>
`string`
</td>
<td>
User email
</td>
</tr>
<tr>
<td>
<a id="id-1"></a> `id`
</td>
<td>
`undefined` \| `string` \| `number`
</td>
<td>
User id
</td>
</tr>
<tr>
<td>
<a id="name-1"></a> `name?`
</td>
<td>
`string`
</td>
<td>
User name
</td>
</tr>
</tbody>
</table>
## Type Aliases
### BootstrappedFlags
```ts
type BootstrappedFlags = {
context: ReflagContext;
flags: RawFlags;
};
```
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="context"></a> `context`
</td>
<td>
[`ReflagContext`](../browser-sdk/globals.md#reflagcontext)
</td>
</tr>
<tr>
<td>
<a id="flags-1"></a> `flags`
</td>
<td>
[`RawFlags`](../browser-sdk/globals.md#rawflags)
</td>
</tr>
</tbody>
</table>
***
### EmptyFlagRemoteConfig
```ts
type EmptyFlagRemoteConfig = {
key: undefined;
payload: undefined;
};
```
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="key-2"></a> `key`
</td>
<td>
`undefined`
</td>
</tr>
<tr>
<td>
<a id="payload"></a> `payload`
</td>
<td>
`undefined`
</td>
</tr>
</tbody>
</table>
***
### FlagType
```ts
type FlagType = {
config: {
payload: any;
};
};
```
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="config-1"></a> `config`?
</td>
<td>
\{
`payload`: `any`;
\}
</td>
</tr>
<tr>
<td>
`config.payload`
</td>
<td>
`any`
</td>
</tr>
</tbody>
</table>
***
### ReflagBaseProps
```ts
type ReflagBaseProps = {
debug: boolean;
initialLoading: boolean;
};
```
**`Internal`**
Base props for the ReflagProvider and ReflagBootstrappedProvider.
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="debug"></a> `debug`?
</td>
<td>
`boolean`
</td>
<td>
Set to `true` to enable debug logging to the console.
</td>
</tr>
<tr>
<td>
<a id="initialloading"></a> `initialLoading`?
</td>
<td>
`boolean`
</td>
<td>
Set to `true` to show the loading component while the client is initializing.
</td>
</tr>
</tbody>
</table>
***
### ReflagBootstrappedProps
```ts
type ReflagBootstrappedProps = ReflagInitOptionsBase & ReflagBaseProps & {
flags: BootstrappedFlags;
};
```
Props for the ReflagBootstrappedProvider.
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`flags`
</td>
<td>
[`BootstrappedFlags`](globals.md#bootstrappedflags)
</td>
<td>
Pre-fetched flags to be used instead of fetching them from the server.
</td>
</tr>
</tbody>
</table>
***
### ReflagClientProviderProps
```ts
type ReflagClientProviderProps = Omit<ReflagBaseProps, "debug"> & {
client: ReflagClient;
};
```
Props for the ReflagClientProvider.
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`client`
</td>
<td>
[`ReflagClient`](../browser-sdk/globals.md#reflagclient)
</td>
<td>
A pre-initialized ReflagClient to use.
</td>
</tr>
</tbody>
</table>
***
### ReflagInitOptionsBase
```ts
type ReflagInitOptionsBase = Omit<InitOptions, "user" | "company" | "other" | "otherContext" | "bootstrappedFlags">;
```
**`Internal`**
Base init options for the ReflagProvider and ReflagBootstrappedProvider.
***
### ReflagProps
```ts
type ReflagProps = ReflagInitOptionsBase & ReflagBaseProps & {
company: CompanyContext;
context: ReflagContext;
otherContext: Record<string, string | number | undefined>;
user: UserContext;
};
```
Props for the ReflagProvider.
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`company`?
</td>
<td>
[`CompanyContext`](globals.md#companycontext)
</td>
<td>
Company related context. If you provide `id` Reflag will enrich the evaluation context with
company attributes on Reflag servers.
**Deprecated**
Use `context` instead, this property will be removed in the next major version
</td>
</tr>
<tr>
<td>
`context`?
</td>
<td>
[`ReflagContext`](../browser-sdk/globals.md#reflagcontext)
</td>
<td>
The context to use for the ReflagClient containing user, company, and other context.
</td>
</tr>
<tr>
<td>
`otherContext`?
</td>
<td>
[`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)\<`string`, `string` \| `number` \| `undefined`\>
</td>
<td>
Context which is not related to a user or a company.
**Deprecated**
Use `context` instead, this property will be removed in the next major version
</td>
</tr>
<tr>
<td>
`user`?
</td>
<td>
[`UserContext`](globals.md#usercontext)
</td>
<td>
User related context. If you provide `id` Reflag will enrich the evaluation context with
user attributes on Reflag servers.
**Deprecated**
Use `context` instead, this property will be removed in the next major version
</td>
</tr>
</tbody>
</table>
***
### RequestFlagFeedbackOptions
```ts
type RequestFlagFeedbackOptions = Omit<RequestFeedbackData, "flagKey" | "featureId">;
```
***
### TrackEvent
```ts
type TrackEvent = {
attributes: | Record<string, any>
| null;
company: CompanyContext;
eventName: string;
user: UserContext;
};
```
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="attributes"></a> `attributes`?
</td>
<td>
\| [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)\<`string`, `any`\>
\| `null`
</td>
</tr>
<tr>
<td>
<a id="company"></a> `company`?
</td>
<td>
[`CompanyContext`](globals.md#companycontext)
</td>
</tr>
<tr>
<td>
<a id="eventname"></a> `eventName`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
<a id="user"></a> `user`
</td>
<td>
[`UserContext`](globals.md#usercontext)
</td>
</tr>
</tbody>
</table>
***
### TypedFlags
```ts
type TypedFlags = keyof Flags extends never ? Record<string, Flag> : { [TypedFlagKey in keyof Flags]: Flags[TypedFlagKey] extends FlagType ? Flag<Flags[TypedFlagKey]["config"]> : Flag };
```
## Variables
### default
```ts
default: {
install: void;
};
```
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="install"></a> `install()`
</td>
<td>
`void`
</td>
</tr>
</tbody>
</table>
***
### ReflagBootstrappedProvider
```ts
const ReflagBootstrappedProvider: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
```
## Functions
### useClient()
```ts
function useClient(): ReflagClient
```
Vue composable for getting the Reflag client.
This composable returns the Reflag client. You can use this to get the Reflag
client at any point in your application.
#### Returns
[`ReflagClient`](../browser-sdk/globals.md#reflagclient)
The Reflag client.
#### Example
```ts
import { useClient } from '@reflag/vue-sdk';
const client = useClient();
console.log(client.getContext());
```
***
### useFlag()
```ts
function useFlag<TKey>(key: TKey): TypedFlags[TKey]
```
Vue composable for getting the state of a given flag for the current context.
This composable returns an object with the state of the flag for the current context.
#### Type Parameters
<table>
<thead>
<tr>
<th>Type Parameter</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`TKey` *extends* `string`
</td>
</tr>
</tbody>
</table>
#### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`key`
</td>
<td>
`TKey`
</td>
<td>
The key of the flag to get the state of.
</td>
</tr>
</tbody>
</table>
#### Returns
[`TypedFlags`](globals.md#typedflags)\[`TKey`\]
An object with the state of the flag.
#### Example
```ts
import { useFlag } from '@reflag/vue-sdk';
const { isEnabled, config, track, requestFeedback } = useFlag("huddles");
function StartHuddlesButton() {
const { isEnabled, config: { payload }, track } = useFlag("huddles");
if (isEnabled) {
return <button onClick={() => track()}>{payload?.buttonTitle ?? "Start Huddles"}</button>;
}
```
***
### useIsLoading()
```ts
function useIsLoading(): Ref<boolean, boolean>
```
Vue composable for checking if the Reflag client is loading.
This composable returns a boolean value that indicates whether the Reflag client is loading.
You can use this to check if the Reflag client is loading at any point in your application.
Initially, the value will be true until the client is initialized.
#### Returns
`Ref`\<`boolean`, `boolean`\>
#### Example
```ts
import { useIsLoading } from '@reflag/vue-sdk';
const isLoading = useIsLoading();
console.log(isLoading);
```
***
### useOnEvent()
```ts
function useOnEvent<THookType>(
event: THookType,
handler: (arg0: HookArgs[THookType]) => void,
client?: ReflagClient): void
```
Vue composable for listening to Reflag client events.
#### Type Parameters
<table>
<thead>
<tr>
<th>Type Parameter</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`THookType` *extends* keyof [`HookArgs`](../browser-sdk/globals.md#hookargs)
</td>
</tr>
</tbody>
</table>
#### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`event`
</td>
<td>
`THookType`
</td>
<td>
The event to listen to.
</td>
</tr>
<tr>
<td>
`handler`
</td>
<td>
(`arg0`: [`HookArgs`](../browser-sdk/globals.md#hookargs)\[`THookType`\]) => `void`
</td>
<td>
The function to call when the event is triggered.
</td>
</tr>
<tr>
<td>
`client`?
</td>
<td>
[`ReflagClient`](../browser-sdk/globals.md#reflagclient)
</td>
<td>
The Reflag client to listen to. If not provided, the client will be retrieved from the context.
</td>
</tr>
</tbody>
</table>
#### Returns
`void`
#### Example
```ts
import { useOnEvent } from '@reflag/vue-sdk';
useOnEvent("flagsUpdated", () => {
console.log("flags updated");
});
```
***
### useRequestFeedback()
```ts
function useRequestFeedback(): (options: RequestFeedbackData) => void
```
Vue composable for requesting user feedback.
This composable returns a function that can be used to trigger the feedback
collection flow with the Reflag SDK. You can use this to prompt users for
feedback at any point in your application.
#### Returns
`Function`
A function that requests feedback from the user. The function accepts:
- `options`: An object containing feedback request options.
##### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`options`
</td>
<td>
[`RequestFeedbackData`](../browser-sdk/globals.md#requestfeedbackdata)
</td>
</tr>
</tbody>
</table>
##### Returns
`void`
#### Example
```ts
import { useRequestFeedback } from '@reflag/vue-sdk';
const requestFeedback = useRequestFeedback();
// Request feedback from the user
requestFeedback({
prompt: "How was your experience?",
metadata: { page: "dashboard" }
});
```
***
### useSendFeedback()
```ts
function useSendFeedback(): (opts: UnassignedFeedback) => Promise<
| undefined
| Response>
```
Vue composable for sending feedback.
This composable returns a function that can be used to send feedback to the
Reflag SDK. You can use this to send feedback from your application.
#### Returns
`Function`
A function that sends feedback to the Reflag SDK. The function accepts:
- `options`: An object containing feedback options.
##### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`opts`
</td>
<td>
[`UnassignedFeedback`](../browser-sdk/globals.md#unassignedfeedback)
</td>
</tr>
</tbody>
</table>
##### Returns
[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<
\| `undefined`
\| [`Response`](https://developer.mozilla.org/docs/Web/API/Response)\>
#### Example
```ts
import { useSendFeedback } from '@reflag/vue-sdk';
const sendFeedback = useSendFeedback();
// Send feedback from the user
sendFeedback({
feedback: "I love this flag!",
metadata: { page: "dashboard" }
});
```
***
### useTrack()
```ts
function useTrack(): (eventName: string, attributes?:
| null
| Record<string, any>) => Promise<
| undefined
| Response>
```
Vue composable for tracking custom events.
This composable returns a function that can be used to track custom events
with the Reflag SDK.
#### Returns
`Function`
A function that tracks an event. The function accepts:
- `eventName`: The name of the event to track.
- `attributes`: (Optional) Additional attributes to associate with the event.
##### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`eventName`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
`attributes`?
</td>
<td>
\| `null` \| [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)\<`string`, `any`\>
</td>
</tr>
</tbody>
</table>
##### Returns
[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<
\| `undefined`
\| [`Response`](https://developer.mozilla.org/docs/Web/API/Response)\>
#### Example
```ts
import { useTrack } from '@reflag/vue-sdk';
const track = useTrack();
// Track a custom event
track('button_clicked', { buttonName: 'Start Huddles' });
```
***
### useUpdateCompany()
```ts
function useUpdateCompany(): (opts: {}) => Promise<void>
```
Vue composable for updating the company context.
This composable returns a function that can be used to update the company
context with the Reflag SDK. You can use this to update the company context
at any point in your application.
#### Returns
`Function`
A function that updates the company context. The function accepts:
- `opts`: An object containing the company context to update.
##### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`opts`
</td>
<td>
\{\}
</td>
</tr>
</tbody>
</table>
##### Returns
[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<`void`\>
#### Example
```ts
import { useUpdateCompany } from '@reflag/vue-sdk';
const updateCompany = useUpdateCompany();
// Update the company context
updateCompany({ id: "123", name: "Acme Inc." });
```
***
### useUpdateOtherContext()
```ts
function useUpdateOtherContext(): (opts: {}) => Promise<void>
```
Vue composable for updating the other context.
This composable returns a function that can be used to update the other
context with the Reflag SDK. You can use this to update the other context
at any point in your application.
#### Returns
`Function`
A function that updates the other context. The function accepts:
- `opts`: An object containing the other context to update.
##### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`opts`
</td>
<td>
\{\}
</td>
</tr>
</tbody>
</table>
##### Returns
[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<`void`\>
#### Example
```ts
import { useUpdateOtherContext } from '@reflag/vue-sdk';
const updateOtherContext = useUpdateOtherContext();
// Update the other context
updateOtherContext({ id: "123", name: "Acme Inc." });
```
***
### useUpdateUser()
```ts
function useUpdateUser(): (opts: {}) => Promise<void>
```
Vue composable for updating the user context.
This composable returns a function that can be used to update the user context
with the Reflag SDK. You can use this to update the user context at any point
in your application.
#### Returns
`Function`
A function that updates the user context. The function accepts:
- `opts`: An object containing the user context to update.
##### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`opts`
</td>
<td>
\{\}
</td>
</tr>
</tbody>
</table>
##### Returns
[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<`void`\>
#### Example
```ts
import { useUpdateUser } from '@reflag/vue-sdk';
const updateUser = useUpdateUser();
// Update the user context
updateUser({ id: "123", name: "John Doe" });
```
## References
### ReflagClientProvider
Renames and re-exports [ReflagBootstrappedProvider](globals.md#reflagbootstrappedprovider)
### ReflagProvider
Renames and re-exports [ReflagBootstrappedProvider](globals.md#reflagbootstrappedprovider)
```
--------------------------------------------------------------------------------
/sdk/@reflag/react-sdk/globals.md:
--------------------------------------------------------------------------------
```markdown
---
layout:
visible: true
title:
visible: true
description:
visible: false
tableOfContents:
visible: true
outline:
visible: true
pagination:
visible: true
---
# @reflag/react-sdk
## Interfaces
### CheckEvent
Event representing checking the flag evaluation result
#### Properties
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="action"></a> `action`
</td>
<td>
`"check-is-enabled"` \| `"check-config"`
</td>
<td>
`check-is-enabled` means `isEnabled` was checked, `check-config` means `config` was checked.
</td>
</tr>
<tr>
<td>
<a id="key"></a> `key`
</td>
<td>
`string`
</td>
<td>
Flag key.
</td>
</tr>
<tr>
<td>
<a id="missingcontextfields"></a> `missingContextFields?`
</td>
<td>
`string`[]
</td>
<td>
Missing context fields.
</td>
</tr>
<tr>
<td>
<a id="ruleevaluationresults"></a> `ruleEvaluationResults?`
</td>
<td>
`boolean`[]
</td>
<td>
Rule evaluation results.
</td>
</tr>
<tr>
<td>
<a id="value"></a> `value?`
</td>
<td>
\| `boolean` \| \{ `key`: `string`; `payload`: `any`; \}
</td>
<td>
Result of flag or configuration evaluation.
If `action` is `check-is-enabled`, this is the result of the flag evaluation and `value` is a boolean.
If `action` is `check-config`, this is the result of the configuration evaluation.
</td>
</tr>
<tr>
<td>
<a id="version"></a> `version?`
</td>
<td>
`number`
</td>
<td>
Version of targeting rules.
</td>
</tr>
</tbody>
</table>
***
### CompanyContext
Context is a set of key-value pairs.
This is used to determine if feature targeting matches and to track events.
Id should always be present so that it can be referenced to an existing company.
#### Indexable
```ts
[key: string]: undefined | string | number
```
#### Properties
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="id"></a> `id`
</td>
<td>
`undefined` \| `string` \| `number`
</td>
<td>
Company id
</td>
</tr>
<tr>
<td>
<a id="name"></a> `name?`
</td>
<td>
`string`
</td>
<td>
Company name
</td>
</tr>
</tbody>
</table>
***
### Flag\<TConfig\>
Describes a feature
#### Type Parameters
<table>
<thead>
<tr>
<th>Type Parameter</th>
<th>Default type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`TConfig` *extends* [`FlagType`](globals.md#flagtype)\[`"config"`\]
</td>
<td>
[`EmptyFlagRemoteConfig`](globals.md#emptyflagremoteconfig)
</td>
</tr>
</tbody>
</table>
#### Properties
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="config"></a> `config`
</td>
<td>
\| [`EmptyFlagRemoteConfig`](globals.md#emptyflagremoteconfig) \| \{ `key`: `string`; \} & `TConfig`
</td>
<td>
‐
</td>
</tr>
<tr>
<td>
<a id="isenabled"></a> `isEnabled`
</td>
<td>
`boolean`
</td>
<td>
If the feature is enabled.
</td>
</tr>
<tr>
<td>
<a id="isloading"></a> `isLoading`
</td>
<td>
`boolean`
</td>
<td>
If the feature is loading.
</td>
</tr>
<tr>
<td>
<a id="key-1"></a> `key`
</td>
<td>
`string`
</td>
<td>
The key of the feature.
</td>
</tr>
<tr>
<td>
<a id="requestfeedback"></a> `requestFeedback`
</td>
<td>
(`opts`: [`RequestFeedbackOptions`](globals.md#requestfeedbackoptions)) => `void`
</td>
<td>
Request feedback from the user.
</td>
</tr>
</tbody>
</table>
#### Methods
##### track()
```ts
track():
| undefined
| Promise<
| undefined
| Response>
```
Track feature usage in Reflag.
###### Returns
\| `undefined`
\| [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<
\| `undefined`
\| [`Response`](https://developer.mozilla.org/docs/Web/API/Response)\>
***
### Flags
***
### UserContext
Context is a set of key-value pairs.
This is used to determine if feature targeting matches and to track events.
Id should always be present so that it can be referenced to an existing user.
#### Indexable
```ts
[key: string]: undefined | string | number
```
#### Properties
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="email"></a> `email?`
</td>
<td>
`string`
</td>
<td>
User email
</td>
</tr>
<tr>
<td>
<a id="id-1"></a> `id`
</td>
<td>
`undefined` \| `string` \| `number`
</td>
<td>
User id
</td>
</tr>
<tr>
<td>
<a id="name-1"></a> `name?`
</td>
<td>
`string`
</td>
<td>
User name
</td>
</tr>
</tbody>
</table>
## Type Aliases
### BootstrappedFlags
```ts
type BootstrappedFlags = {
context: ReflagContext;
flags: RawFlags;
};
```
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="context"></a> `context`
</td>
<td>
[`ReflagContext`](../browser-sdk/globals.md#reflagcontext)
</td>
</tr>
<tr>
<td>
<a id="flags-1"></a> `flags`
</td>
<td>
[`RawFlags`](globals.md#rawflags)
</td>
</tr>
</tbody>
</table>
***
### EmptyFlagRemoteConfig
```ts
type EmptyFlagRemoteConfig = {
key: undefined;
payload: undefined;
};
```
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="key-2"></a> `key`
</td>
<td>
`undefined`
</td>
</tr>
<tr>
<td>
<a id="payload"></a> `payload`
</td>
<td>
`undefined`
</td>
</tr>
</tbody>
</table>
***
### FlagKey
```ts
type FlagKey = keyof TypedFlags;
```
***
### FlagRemoteConfig
```ts
type FlagRemoteConfig =
| {
key: string;
payload: any;
}
| EmptyFlagRemoteConfig;
```
A remotely managed configuration value for a feature.
#### Type declaration
\{
`key`: `string`;
`payload`: `any`;
\}
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`key`
</td>
<td>
`string`
</td>
<td>
The key of the matched configuration value.
</td>
</tr>
<tr>
<td>
`payload`
</td>
<td>
`any`
</td>
<td>
The optional user-supplied payload data.
</td>
</tr>
</tbody>
</table>
[`EmptyFlagRemoteConfig`](globals.md#emptyflagremoteconfig)
***
### FlagType
```ts
type FlagType = {
config: {
payload: any;
};
};
```
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="config-1"></a> `config`?
</td>
<td>
\{
`payload`: `any`;
\}
</td>
</tr>
<tr>
<td>
`config.payload`
</td>
<td>
`any`
</td>
</tr>
</tbody>
</table>
***
### RawFlags
```ts
type RawFlags = Record<FlagKey, RawFlag>;
```
Describes a collection of evaluated raw flags.
***
### ReflagBootstrappedProps
```ts
type ReflagBootstrappedProps = ReflagPropsBase & ReflagInitOptionsBase & {
flags: BootstrappedFlags;
};
```
Props for the ReflagBootstrappedProvider.
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`flags`
</td>
<td>
[`BootstrappedFlags`](globals.md#bootstrappedflags)
</td>
<td>
Pre-fetched flags to be used instead of fetching them from the server.
</td>
</tr>
</tbody>
</table>
***
### ReflagClientProviderProps
```ts
type ReflagClientProviderProps = Omit<ReflagPropsBase, "debug"> & {
client: ReflagClient;
};
```
Props for the ReflagClientProvider.
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`client`
</td>
<td>
[`ReflagClient`](../browser-sdk/globals.md#reflagclient)
</td>
</tr>
</tbody>
</table>
***
### ReflagInitOptionsBase
```ts
type ReflagInitOptionsBase = Omit<InitOptions, "user" | "company" | "other" | "otherContext" | "bootstrappedFlags">;
```
**`Internal`**
Base init options for the ReflagProvider and ReflagBootstrappedProvider.
***
### ReflagProps
```ts
type ReflagProps = ReflagPropsBase & ReflagInitOptionsBase & {
company: CompanyContext;
context: ReflagContext;
otherContext: Record<string, string | number | undefined>;
user: UserContext;
};
```
Props for the ReflagProvider.
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`company`?
</td>
<td>
[`CompanyContext`](globals.md#companycontext)
</td>
<td>
Company related context. If you provide `id` Reflag will enrich the evaluation context with
company attributes on Reflag servers.
**Deprecated**
Use `context` instead, this property will be removed in the next major version
</td>
</tr>
<tr>
<td>
`context`?
</td>
<td>
[`ReflagContext`](../browser-sdk/globals.md#reflagcontext)
</td>
<td>
The context to use for the ReflagClient containing user, company, and other context.
</td>
</tr>
<tr>
<td>
`otherContext`?
</td>
<td>
[`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)\<`string`, `string` \| `number` \| `undefined`\>
</td>
<td>
Context which is not related to a user or a company.
**Deprecated**
Use `context` instead, this property will be removed in the next major version
</td>
</tr>
<tr>
<td>
`user`?
</td>
<td>
[`UserContext`](globals.md#usercontext)
</td>
<td>
User related context. If you provide `id` Reflag will enrich the evaluation context with
user attributes on Reflag servers.
**Deprecated**
Use `context` instead, this property will be removed in the next major version
</td>
</tr>
</tbody>
</table>
***
### ReflagPropsBase
```ts
type ReflagPropsBase = {
children: ReactNode;
debug: boolean;
initialLoading: boolean;
loadingComponent: ReactNode;
};
```
**`Internal`**
Base props for the ReflagProvider and ReflagBootstrappedProvider.
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="children"></a> `children`?
</td>
<td>
`ReactNode`
</td>
<td>
The children to render after the client is initialized.
</td>
</tr>
<tr>
<td>
<a id="debug"></a> `debug`?
</td>
<td>
`boolean`
</td>
<td>
Set to `true` to enable debug logging to the console,
</td>
</tr>
<tr>
<td>
<a id="initialloading"></a> `initialLoading`?
</td>
<td>
`boolean`
</td>
<td>
Set to `true` to show the loading component while the client is initializing.
</td>
</tr>
<tr>
<td>
<a id="loadingcomponent"></a> `loadingComponent`?
</td>
<td>
`ReactNode`
</td>
<td>
A React component to show while the client is initializing.
</td>
</tr>
</tbody>
</table>
***
### RequestFeedbackOptions
```ts
type RequestFeedbackOptions = Omit<RequestFeedbackData, "flagKey" | "featureId">;
```
***
### TrackEvent
```ts
type TrackEvent = {
attributes: | Record<string, any>
| null;
company: CompanyContext;
eventName: string;
user: UserContext;
};
```
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="attributes"></a> `attributes`?
</td>
<td>
\| [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)\<`string`, `any`\>
\| `null`
</td>
</tr>
<tr>
<td>
<a id="company"></a> `company`?
</td>
<td>
[`CompanyContext`](globals.md#companycontext)
</td>
</tr>
<tr>
<td>
<a id="eventname"></a> `eventName`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
<a id="user"></a> `user`
</td>
<td>
[`UserContext`](globals.md#usercontext)
</td>
</tr>
</tbody>
</table>
***
### TypedFlags
```ts
type TypedFlags = keyof Flags extends never ? Record<string, Flag> : { [TypedFlagKey in keyof Flags]: Flags[TypedFlagKey] extends FlagType ? Flag<Flags[TypedFlagKey]["config"]> : Flag };
```
Describes a collection of evaluated feature.
#### Remarks
This types falls back to a generic Record<string, Flag> if the Flags interface
has not been extended.
## Functions
### ReflagBootstrappedProvider()
```ts
function ReflagBootstrappedProvider(__namedParameters: ReflagBootstrappedProps): Element
```
Bootstrapped Provider for the ReflagClient using pre-fetched flags.
#### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`__namedParameters`
</td>
<td>
[`ReflagBootstrappedProps`](globals.md#reflagbootstrappedprops)
</td>
</tr>
</tbody>
</table>
#### Returns
`Element`
***
### ReflagClientProvider()
```ts
function ReflagClientProvider(__namedParameters: ReflagClientProviderProps): Element
```
#### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`__namedParameters`
</td>
<td>
[`ReflagClientProviderProps`](globals.md#reflagclientproviderprops)
</td>
</tr>
</tbody>
</table>
#### Returns
`Element`
***
### ReflagProvider()
```ts
function ReflagProvider(__namedParameters: ReflagProps): Element
```
Provider for the ReflagClient.
#### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`__namedParameters`
</td>
<td>
[`ReflagProps`](globals.md#reflagprops)
</td>
</tr>
</tbody>
</table>
#### Returns
`Element`
***
### useClient()
```ts
function useClient(): ReflagClient
```
Returns the current `ReflagClient` used by the `ReflagProvider`.
This is useful if you need to access the `ReflagClient` outside of the `ReflagProvider`.
#### Returns
[`ReflagClient`](../browser-sdk/globals.md#reflagclient)
The `ReflagClient`.
#### Example
```ts
import { useClient } from '@reflag/react-sdk';
function App() {
const client = useClient();
console.log(client.getContext());
}
```
***
### ~~useFeature()~~
```ts
function useFeature<TKey>(key: TKey): Flag
```
#### Type Parameters
<table>
<thead>
<tr>
<th>Type Parameter</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`TKey` *extends* `string`
</td>
</tr>
</tbody>
</table>
#### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`key`
</td>
<td>
`TKey`
</td>
</tr>
</tbody>
</table>
#### Returns
[`Flag`](globals.md#flagtconfig)
#### Deprecated
use `useFlag` instead
***
### useFlag()
```ts
function useFlag<TKey>(key: TKey): TypedFlags[TKey]
```
Returns the state of a given feature for the current context, e.g.
```ts
function HuddleButton() {
const {isEnabled, config: { payload }, track} = useFlag("huddle");
if (isEnabled) {
return <button onClick={() => track()}>{payload?.buttonTitle ?? "Start Huddle"}</button>;
}
```
#### Type Parameters
<table>
<thead>
<tr>
<th>Type Parameter</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`TKey` *extends* `string`
</td>
</tr>
</tbody>
</table>
#### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`key`
</td>
<td>
`TKey`
</td>
</tr>
</tbody>
</table>
#### Returns
[`TypedFlags`](globals.md#typedflags)\[`TKey`\]
***
### useIsLoading()
```ts
function useIsLoading(): boolean
```
Returns a boolean indicating if the Reflag client is loading.
You can use this to check if the Reflag client is loading at any point in your application.
Initially, the value will be true until the client is initialized.
#### Returns
`boolean`
A boolean indicating if the Reflag client is loading.
#### Example
```ts
import { useIsLoading } from '@reflag/react-sdk';
const isLoading = useIsLoading();
console.log(isLoading);
```
***
### useOnEvent()
```ts
function useOnEvent<THookType>(
event: THookType,
handler: (arg0: HookArgs[THookType]) => void,
client?: ReflagClient): void
```
Attach a callback handler to client events to act on changes. It automatically disposes itself on unmount.
#### Type Parameters
<table>
<thead>
<tr>
<th>Type Parameter</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`THookType` *extends* keyof [`HookArgs`](../browser-sdk/globals.md#hookargs)
</td>
</tr>
</tbody>
</table>
#### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`event`
</td>
<td>
`THookType`
</td>
<td>
The event to listen to.
</td>
</tr>
<tr>
<td>
`handler`
</td>
<td>
(`arg0`: [`HookArgs`](../browser-sdk/globals.md#hookargs)\[`THookType`\]) => `void`
</td>
<td>
The function to call when the event is triggered.
</td>
</tr>
<tr>
<td>
`client`?
</td>
<td>
[`ReflagClient`](../browser-sdk/globals.md#reflagclient)
</td>
<td>
The Reflag client to listen to. If not provided, the client will be retrieved from the context.
</td>
</tr>
</tbody>
</table>
#### Returns
`void`
#### Example
```ts
import { useOnEvent } from '@reflag/react-sdk';
useOnEvent("flagsUpdated", () => {
console.log("flags updated");
});
```
***
### useRequestFeedback()
```ts
function useRequestFeedback(): (options: RequestFeedbackData) => void
```
Returns a function to open up the feedback form
Note: When calling `useRequestFeedback`, user/company must already be set.
See [link](../../documents/browser-sdk/FEEDBACK.md) for more information
```ts
const requestFeedback = useRequestFeedback();
reflag.requestFeedback({
flagKey: "file-uploads",
title: "How satisfied are you with file uploads?",
});
```
#### Returns
`Function`
##### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`options`
</td>
<td>
[`RequestFeedbackData`](../browser-sdk/globals.md#requestfeedbackdata)
</td>
</tr>
</tbody>
</table>
##### Returns
`void`
***
### useSendFeedback()
```ts
function useSendFeedback(): (opts: UnassignedFeedback) => Promise<
| undefined
| Response>
```
Returns a function to manually send feedback collected from a user.
Note: When calling `useSendFeedback`, user/company must already be set.
See [link](../../documents/browser-sdk/FEEDBACK.md) for more information
```ts
const sendFeedback = useSendFeedback();
sendFeedback({
flagKey: "huddle";
question: "How did you like the new huddle feature?";
score: 5;
comment: "I loved it!";
});
```
#### Returns
`Function`
##### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`opts`
</td>
<td>
[`UnassignedFeedback`](../browser-sdk/globals.md#unassignedfeedback)
</td>
</tr>
</tbody>
</table>
##### Returns
[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<
\| `undefined`
\| [`Response`](https://developer.mozilla.org/docs/Web/API/Response)\>
***
### useTrack()
```ts
function useTrack(): (eventName: string, attributes?:
| null
| Record<string, any>) => Promise<
| undefined
| Response>
```
Returns a function to send an event when a user performs an action
Note: When calling `useTrack`, user/company must already be set.
```ts
const track = useTrack();
track("Started Huddle", { button: "cta" });
```
#### Returns
`Function`
##### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`eventName`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
`attributes`?
</td>
<td>
\| `null` \| [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)\<`string`, `any`\>
</td>
</tr>
</tbody>
</table>
##### Returns
[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<
\| `undefined`
\| [`Response`](https://developer.mozilla.org/docs/Web/API/Response)\>
***
### useUpdateCompany()
```ts
function useUpdateCompany(): (opts: {}) => Promise<void>
```
Returns a function to update the current company's information.
For example, if the company changed plan or opted into a beta-feature.
The method returned is a function which returns a promise that
resolves when after the features have been updated as a result
of the company update.
```ts
const updateCompany = useUpdateCompany();
updateCompany({ plan: "enterprise" }).then(() => console.log("Flags updated"));
```
#### Returns
`Function`
##### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`opts`
</td>
<td>
\{\}
</td>
</tr>
</tbody>
</table>
##### Returns
[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<`void`\>
***
### useUpdateOtherContext()
```ts
function useUpdateOtherContext(): (opts: {}) => Promise<void>
```
Returns a function to update the "other" context information.
For example, if the user changed workspace, you can set the workspace id here.
The method returned is a function which returns a promise that
resolves when after the features have been updated as a result
of the update to the "other" context.
```ts
const updateOtherContext = useUpdateOtherContext();
updateOtherContext({ workspaceId: newWorkspaceId })
.then(() => console.log("Flags updated"));
```
#### Returns
`Function`
##### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`opts`
</td>
<td>
\{\}
</td>
</tr>
</tbody>
</table>
##### Returns
[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<`void`\>
***
### useUpdateUser()
```ts
function useUpdateUser(): (opts: {}) => Promise<void>
```
Returns a function to update the current user's information.
For example, if the user changed role or opted into a beta-feature.
The method returned is a function which returns a promise that
resolves when after the features have been updated as a result
of the user update.
```ts
const updateUser = useUpdateUser();
updateUser({ optInHuddles: "true" }).then(() => console.log("Flags updated"));
```
#### Returns
`Function`
##### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`opts`
</td>
<td>
\{\}
</td>
</tr>
</tbody>
</table>
##### Returns
[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<`void`\>
```
--------------------------------------------------------------------------------
/sdk/@reflag/browser-sdk/globals.md:
--------------------------------------------------------------------------------
```markdown
---
layout:
visible: true
title:
visible: true
description:
visible: false
tableOfContents:
visible: true
outline:
visible: true
pagination:
visible: true
---
# @reflag/browser-sdk
## Classes
### ReflagClient
ReflagClient lets you interact with the Reflag API.
#### Constructors
##### new ReflagClient()
```ts
new ReflagClient(opts: InitOptions): ReflagClient
```
Create a new ReflagClient instance.
###### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`opts`
</td>
<td>
[`InitOptions`](globals.md#initoptions)
</td>
</tr>
</tbody>
</table>
###### Returns
[`ReflagClient`](globals.md#reflagclient)
#### Properties
<table>
<thead>
<tr>
<th>Property</th>
<th>Modifier</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="logger"></a> `logger`
</td>
<td>
`readonly`
</td>
<td>
[`Logger`](globals.md#logger-1)
</td>
</tr>
</tbody>
</table>
#### Methods
##### feedback()
```ts
feedback(payload: Feedback): Promise<
| undefined
| Response>
```
Submit user feedback to Reflag. Must include either `score` or `comment`, or both.
###### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`payload`
</td>
<td>
[`Feedback`](globals.md#feedback-1)
</td>
<td>
The feedback details to submit.
</td>
</tr>
</tbody>
</table>
###### Returns
[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<
\| `undefined`
\| [`Response`](https://developer.mozilla.org/docs/Web/API/Response)\>
The server response.
##### getConfig()
```ts
getConfig(): Config
```
Get the current configuration.
###### Returns
[`Config`](globals.md#config)
##### getContext()
```ts
getContext(): ReflagContext
```
Get the current context.
###### Returns
[`ReflagContext`](globals.md#reflagcontext)
##### ~~getFeature()~~
```ts
getFeature(flagKey: string): Flag
```
###### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`flagKey`
</td>
<td>
`string`
</td>
</tr>
</tbody>
</table>
###### Returns
[`Flag`](globals.md#flag)
###### Deprecated
Use `getFlag` instead.
##### ~~getFeatures()~~
```ts
getFeatures(): RawFlags
```
###### Returns
[`RawFlags`](globals.md#rawflags)
###### Deprecated
Use `getFlags` instead.
##### getFlag()
```ts
getFlag(flagKey: string): Flag
```
Return a flag. Accessing `isEnabled` or `config` will automatically send a `check` event.
###### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`flagKey`
</td>
<td>
`string`
</td>
<td>
The key of the flag to get.
</td>
</tr>
</tbody>
</table>
###### Returns
[`Flag`](globals.md#flag)
A flag.
##### getFlags()
```ts
getFlags(): RawFlags
```
Returns a map of enabled flags.
Accessing a flag will *not* send a check event
and `isEnabled` does not take any flag overrides
into account.
###### Returns
[`RawFlags`](globals.md#rawflags)
Map of flags.
##### getState()
```ts
getState(): State
```
###### Returns
[`State`](globals.md#state)
##### initialize()
```ts
initialize(): Promise<void>
```
Initialize the Reflag SDK.
Must be called before calling other SDK methods.
###### Returns
[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<`void`\>
##### off()
```ts
off<THookType>(type: THookType, handler: (args0: HookArgs[THookType]) => void): void
```
Remove an event listener
###### Type Parameters
<table>
<thead>
<tr>
<th>Type Parameter</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`THookType` *extends* keyof [`HookArgs`](globals.md#hookargs)
</td>
</tr>
</tbody>
</table>
###### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`type`
</td>
<td>
`THookType`
</td>
<td>
Type of event to remove.
</td>
</tr>
<tr>
<td>
`handler`
</td>
<td>
(`args0`: [`HookArgs`](globals.md#hookargs)\[`THookType`\]) => `void`
</td>
<td>
The same function that was passed to `on`.
</td>
</tr>
</tbody>
</table>
###### Returns
`void`
A function to remove the hook.
##### on()
```ts
on<THookType>(type: THookType, handler: (args0: HookArgs[THookType]) => void): () => void
```
Add an event listener
###### Type Parameters
<table>
<thead>
<tr>
<th>Type Parameter</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`THookType` *extends* keyof [`HookArgs`](globals.md#hookargs)
</td>
</tr>
</tbody>
</table>
###### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`type`
</td>
<td>
`THookType`
</td>
<td>
Type of events to listen for
</td>
</tr>
<tr>
<td>
`handler`
</td>
<td>
(`args0`: [`HookArgs`](globals.md#hookargs)\[`THookType`\]) => `void`
</td>
<td>
The function to call when the event is triggered.
</td>
</tr>
</tbody>
</table>
###### Returns
`Function`
A function to remove the hook.
###### Returns
`void`
##### requestFeedback()
```ts
requestFeedback(options: RequestFeedbackData): void
```
Display the Reflag feedback form UI programmatically.
This can be used to collect feedback from users in Reflag in cases where Automated Feedback Surveys isn't appropriate.
###### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`options`
</td>
<td>
[`RequestFeedbackData`](globals.md#requestfeedbackdata)
</td>
</tr>
</tbody>
</table>
###### Returns
`void`
##### setContext()
```ts
setContext(context: ReflagDeprecatedContext): Promise<void>
```
Update the context.
Replaces the existing context with a new context.
###### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`context`
</td>
<td>
[`ReflagDeprecatedContext`](globals.md#reflagdeprecatedcontext)
</td>
<td>
The context to update.
</td>
</tr>
</tbody>
</table>
###### Returns
[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<`void`\>
##### stop()
```ts
stop(): Promise<void>
```
Stop the SDK.
This will stop any automated feedback surveys.
###### Returns
[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<`void`\>
##### track()
```ts
track(eventName: string, attributes?:
| null
| Record<string, any>): Promise<
| undefined
| Response>
```
Track an event in Reflag.
###### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`eventName`
</td>
<td>
`string`
</td>
<td>
The name of the event.
</td>
</tr>
<tr>
<td>
`attributes`?
</td>
<td>
\| `null` \| [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)\<`string`, `any`\>
</td>
<td>
Any attributes you want to attach to the event.
</td>
</tr>
</tbody>
</table>
###### Returns
[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<
\| `undefined`
\| [`Response`](https://developer.mozilla.org/docs/Web/API/Response)\>
##### updateCompany()
```ts
updateCompany(company: {}): Promise<void>
```
Update the company context.
Performs a shallow merge with the existing company context.
It will not update the context if nothing has changed.
###### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`company`
</td>
<td>
\{\}
</td>
<td>
The company details.
</td>
</tr>
</tbody>
</table>
###### Returns
[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<`void`\>
##### updateFlags()
```ts
updateFlags(flags: RawFlags, triggerEvent: boolean): void
```
Update the flags.
###### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Default value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`flags`
</td>
<td>
[`RawFlags`](globals.md#rawflags)
</td>
<td>
`undefined`
</td>
<td>
The flags to update.
</td>
</tr>
<tr>
<td>
`triggerEvent`
</td>
<td>
`boolean`
</td>
<td>
`true`
</td>
<td>
Whether to trigger the `flagsUpdated` event.
</td>
</tr>
</tbody>
</table>
###### Returns
`void`
##### updateOtherContext()
```ts
updateOtherContext(otherContext: {}): Promise<void>
```
Update the company context.
Performs a shallow merge with the existing company context.
It will not update the context if nothing has changed.
###### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`otherContext`
</td>
<td>
\{\}
</td>
<td>
Additional context.
</td>
</tr>
</tbody>
</table>
###### Returns
[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<`void`\>
##### updateUser()
```ts
updateUser(user: {}): Promise<void>
```
Update the user context.
Performs a shallow merge with the existing user context.
It will not update the context if nothing has changed.
###### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`user`
</td>
<td>
\{\}
</td>
</tr>
</tbody>
</table>
###### Returns
[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<`void`\>
## Interfaces
### CheckEvent
Event representing checking the flag evaluation result
#### Properties
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="action"></a> `action`
</td>
<td>
`"check-is-enabled"` \| `"check-config"`
</td>
<td>
`check-is-enabled` means `isEnabled` was checked, `check-config` means `config` was checked.
</td>
</tr>
<tr>
<td>
<a id="key"></a> `key`
</td>
<td>
`string`
</td>
<td>
Flag key.
</td>
</tr>
<tr>
<td>
<a id="missingcontextfields"></a> `missingContextFields?`
</td>
<td>
`string`[]
</td>
<td>
Missing context fields.
</td>
</tr>
<tr>
<td>
<a id="ruleevaluationresults"></a> `ruleEvaluationResults?`
</td>
<td>
`boolean`[]
</td>
<td>
Rule evaluation results.
</td>
</tr>
<tr>
<td>
<a id="value"></a> `value?`
</td>
<td>
\| `boolean` \| \{ `key`: `string`; `payload`: `any`; \}
</td>
<td>
Result of flag or configuration evaluation.
If `action` is `check-is-enabled`, this is the result of the flag evaluation and `value` is a boolean.
If `action` is `check-config`, this is the result of the configuration evaluation.
</td>
</tr>
<tr>
<td>
<a id="version"></a> `version?`
</td>
<td>
`number`
</td>
<td>
Version of targeting rules.
</td>
</tr>
</tbody>
</table>
***
### CompanyContext
Context is a set of key-value pairs.
This is used to determine if feature targeting matches and to track events.
Id should always be present so that it can be referenced to an existing company.
#### Indexable
```ts
[key: string]: undefined | string | number
```
#### Properties
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="id"></a> `id`
</td>
<td>
`undefined` \| `string` \| `number`
</td>
<td>
Company id
</td>
</tr>
<tr>
<td>
<a id="name"></a> `name?`
</td>
<td>
`string`
</td>
<td>
Company name
</td>
</tr>
</tbody>
</table>
***
### Config
ReflagClient configuration.
#### Properties
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="apibaseurl"></a> `apiBaseUrl`
</td>
<td>
`string`
</td>
<td>
Base URL of Reflag servers.
</td>
</tr>
<tr>
<td>
<a id="appbaseurl"></a> `appBaseUrl`
</td>
<td>
`string`
</td>
<td>
Base URL of the Reflag web app.
</td>
</tr>
<tr>
<td>
<a id="bootstrapped"></a> `bootstrapped`
</td>
<td>
`boolean`
</td>
<td>
Whether the client is bootstrapped.
</td>
</tr>
<tr>
<td>
<a id="enabletracking"></a> `enableTracking`
</td>
<td>
`boolean`
</td>
<td>
Whether to enable tracking.
</td>
</tr>
<tr>
<td>
<a id="offline"></a> `offline`
</td>
<td>
`boolean`
</td>
<td>
Whether to enable offline mode.
</td>
</tr>
<tr>
<td>
<a id="ssebaseurl"></a> `sseBaseUrl`
</td>
<td>
`string`
</td>
<td>
Base URL of Reflag servers for SSE connections used by AutoFeedback.
</td>
</tr>
</tbody>
</table>
***
### FeedbackScoreSubmission
#### Properties
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="feedbackid"></a> `feedbackId?`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
<a id="question"></a> `question`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
<a id="score"></a> `score`
</td>
<td>
`number`
</td>
</tr>
</tbody>
</table>
***
### FeedbackSubmission
#### Properties
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="comment"></a> `comment`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
<a id="feedbackid-1"></a> `feedbackId?`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
<a id="question-1"></a> `question`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
<a id="score-1"></a> `score`
</td>
<td>
`number`
</td>
</tr>
</tbody>
</table>
***
### Flag
Represents a flag.
#### Properties
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="config-1"></a> `config`
</td>
<td>
[`FlagRemoteConfig`](globals.md#flagremoteconfig)
</td>
<td>
‐
</td>
</tr>
<tr>
<td>
<a id="isenabled"></a> `isEnabled`
</td>
<td>
`boolean`
</td>
<td>
Result of flag flag evaluation.
Note: Does not take local overrides into account.
</td>
</tr>
<tr>
<td>
<a id="isenabledoverride"></a> `isEnabledOverride`
</td>
<td>
`null` \| `boolean`
</td>
<td>
The current override status of isEnabled for the flag.
</td>
</tr>
<tr>
<td>
<a id="requestfeedback-1"></a> `requestFeedback`
</td>
<td>
(`options`: [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)\<[`RequestFeedbackData`](globals.md#requestfeedbackdata), `"featureId"` \| `"flagKey"`\>) => `void`
</td>
<td>
Function to request feedback for this flag.
</td>
</tr>
<tr>
<td>
<a id="track-1"></a> `track`
</td>
<td>
() => [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\< \| `undefined` \| [`Response`](https://developer.mozilla.org/docs/Web/API/Response)\>
</td>
<td>
Function to send analytics events for this flag.
</td>
</tr>
</tbody>
</table>
#### Methods
##### setIsEnabledOverride()
```ts
setIsEnabledOverride(isEnabled: null | boolean): void
```
Set the override status for isEnabled for the flag.
Set to `null` to remove the override.
###### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`isEnabled`
</td>
<td>
`null` \| `boolean`
</td>
</tr>
</tbody>
</table>
###### Returns
`void`
***
### HookArgs
#### Properties
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="check"></a> `check`
</td>
<td>
[`CheckEvent`](globals.md#checkevent)
</td>
<td>
‐
</td>
</tr>
<tr>
<td>
<a id="company"></a> `company`
</td>
<td>
[`CompanyContext`](globals.md#companycontext)
</td>
<td>
‐
</td>
</tr>
<tr>
<td>
<a id="featuresupdated"></a> ~~`featuresUpdated`~~
</td>
<td>
[`RawFlags`](globals.md#rawflags)
</td>
<td>
**Deprecated**
Use `flagsUpdated` instead.
</td>
</tr>
<tr>
<td>
<a id="flagsupdated"></a> `flagsUpdated`
</td>
<td>
[`RawFlags`](globals.md#rawflags)
</td>
<td>
‐
</td>
</tr>
<tr>
<td>
<a id="stateupdated"></a> `stateUpdated`
</td>
<td>
[`State`](globals.md#state)
</td>
<td>
‐
</td>
</tr>
<tr>
<td>
<a id="track-2"></a> `track`
</td>
<td>
[`TrackEvent`](globals.md#trackevent)
</td>
<td>
‐
</td>
</tr>
<tr>
<td>
<a id="user"></a> `user`
</td>
<td>
[`UserContext`](globals.md#usercontext)
</td>
<td>
‐
</td>
</tr>
</tbody>
</table>
***
### Logger
#### Methods
##### debug()
```ts
debug(message: string, ...args: any[]): void
```
###### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`message`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
...`args`
</td>
<td>
`any`[]
</td>
</tr>
</tbody>
</table>
###### Returns
`void`
##### error()
```ts
error(message: string, ...args: any[]): void
```
###### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`message`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
...`args`
</td>
<td>
`any`[]
</td>
</tr>
</tbody>
</table>
###### Returns
`void`
##### info()
```ts
info(message: string, ...args: any[]): void
```
###### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`message`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
...`args`
</td>
<td>
`any`[]
</td>
</tr>
</tbody>
</table>
###### Returns
`void`
##### warn()
```ts
warn(message: string, ...args: any[]): void
```
###### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`message`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
...`args`
</td>
<td>
`any`[]
</td>
</tr>
</tbody>
</table>
###### Returns
`void`
***
### OnScoreSubmitResult
#### Properties
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="feedbackid-2"></a> `feedbackId`
</td>
<td>
`string`
</td>
</tr>
</tbody>
</table>
***
### OpenFeedbackFormOptions
#### Properties
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="key-1"></a> `key`
</td>
<td>
`string`
</td>
<td>
‐
</td>
</tr>
<tr>
<td>
<a id="onclose"></a> `onClose?`
</td>
<td>
() => `void`
</td>
<td>
‐
</td>
</tr>
<tr>
<td>
<a id="ondismiss"></a> `onDismiss?`
</td>
<td>
() => `void`
</td>
<td>
‐
</td>
</tr>
<tr>
<td>
<a id="onscoresubmit"></a> `onScoreSubmit?`
</td>
<td>
(`data`: [`FeedbackScoreSubmission`](globals.md#feedbackscoresubmission)) => [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<[`OnScoreSubmitResult`](globals.md#onscoresubmitresult)\>
</td>
<td>
‐
</td>
</tr>
<tr>
<td>
<a id="onsubmit"></a> `onSubmit`
</td>
<td>
(`data`: [`FeedbackSubmission`](globals.md#feedbacksubmission)) => \| `void` \| [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<`void`\>
</td>
<td>
‐
</td>
</tr>
<tr>
<td>
<a id="openwithcommentvisible"></a> `openWithCommentVisible?`
</td>
<td>
`boolean`
</td>
<td>
Open the form with both the score and comment fields visible.
Defaults to `false`
</td>
</tr>
<tr>
<td>
<a id="position"></a> `position?`
</td>
<td>
[`Position`](globals.md#position-1)
</td>
<td>
Control the placement and behavior of the feedback form.
</td>
</tr>
<tr>
<td>
<a id="title"></a> `title?`
</td>
<td>
`string`
</td>
<td>
‐
</td>
</tr>
<tr>
<td>
<a id="translations"></a> `translations?`
</td>
<td>
[`Partial`](https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype)\<[`FeedbackTranslations`](globals.md#feedbacktranslations)\>
</td>
<td>
Add your own custom translations for the feedback form.
Undefined translation keys fall back to english defaults.
</td>
</tr>
</tbody>
</table>
***
### ReflagContext
Context is a set of key-value pairs.
This is used to determine if feature targeting matches and to track events.
#### Extended by
- [`ReflagDeprecatedContext`](globals.md#reflagdeprecatedcontext)
#### Properties
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="company-1"></a> `company?`
</td>
<td>
[`CompanyContext`](globals.md#companycontext)
</td>
<td>
Company related context. If you provide `id` Reflag will enrich the evaluation context with
company attributes on Reflag servers.
</td>
</tr>
<tr>
<td>
<a id="other"></a> `other?`
</td>
<td>
[`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)\<`string`, `undefined` \| `string` \| `number`\>
</td>
<td>
Context which is not related to a user or a company.
</td>
</tr>
<tr>
<td>
<a id="user-1"></a> `user?`
</td>
<td>
[`UserContext`](globals.md#usercontext)
</td>
<td>
User related context. If you provide `id` Reflag will enrich the evaluation context with
user attributes on Reflag servers.
</td>
</tr>
</tbody>
</table>
***
### ~~ReflagDeprecatedContext~~
**`Internal`**
#### Deprecated
Use `ReflagContext` instead, this interface will be removed in the next major version
#### Extends
- [`ReflagContext`](globals.md#reflagcontext)
#### Properties
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="company-2"></a> ~~`company?`~~
</td>
<td>
[`CompanyContext`](globals.md#companycontext)
</td>
<td>
Company related context. If you provide `id` Reflag will enrich the evaluation context with
company attributes on Reflag servers.
</td>
</tr>
<tr>
<td>
<a id="other-1"></a> ~~`other?`~~
</td>
<td>
[`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)\<`string`, `undefined` \| `string` \| `number`\>
</td>
<td>
Context which is not related to a user or a company.
</td>
</tr>
<tr>
<td>
<a id="othercontext"></a> ~~`otherContext?`~~
</td>
<td>
[`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)\<`string`, `undefined` \| `string` \| `number`\>
</td>
<td>
Context which is not related to a user or a company.
**Deprecated**
Use `other` instead, this property will be removed in the next major version
</td>
</tr>
<tr>
<td>
<a id="user-2"></a> ~~`user?`~~
</td>
<td>
[`UserContext`](globals.md#usercontext)
</td>
<td>
User related context. If you provide `id` Reflag will enrich the evaluation context with
user attributes on Reflag servers.
</td>
</tr>
</tbody>
</table>
***
### ToolbarPosition
#### Properties
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="offset"></a> `offset?`
</td>
<td>
[`Offset`](globals.md#offset-1)
</td>
</tr>
<tr>
<td>
<a id="placement"></a> `placement`
</td>
<td>
[`DialogPlacement`](globals.md#dialogplacement)
</td>
</tr>
</tbody>
</table>
***
### UserContext
Context is a set of key-value pairs.
This is used to determine if feature targeting matches and to track events.
Id should always be present so that it can be referenced to an existing user.
#### Indexable
```ts
[key: string]: undefined | string | number
```
#### Properties
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="email"></a> `email?`
</td>
<td>
`string`
</td>
<td>
User email
</td>
</tr>
<tr>
<td>
<a id="id-1"></a> `id`
</td>
<td>
`undefined` \| `string` \| `number`
</td>
<td>
User id
</td>
</tr>
<tr>
<td>
<a id="name-1"></a> `name?`
</td>
<td>
`string`
</td>
<td>
User name
</td>
</tr>
</tbody>
</table>
## Type Aliases
### DialogPlacement
```ts
type DialogPlacement = "bottom-right" | "bottom-left" | "top-right" | "top-left";
```
***
### FallbackFlagOverride
```ts
type FallbackFlagOverride =
| {
key: string;
payload: any;
}
| true;
```
***
### Feedback
```ts
type Feedback = UnassignedFeedback & {
companyId: string;
userId: string;
};
```
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`companyId`?
</td>
<td>
`string`
</td>
<td>
Company ID from your own application.
</td>
</tr>
<tr>
<td>
`userId`?
</td>
<td>
`string`
</td>
<td>
User ID from your own application.
</td>
</tr>
</tbody>
</table>
***
### FeedbackOptions
```ts
type FeedbackOptions = {
autoFeedbackHandler: FeedbackPromptHandler;
enableAutoFeedback: boolean;
ui: {
position: Position;
translations: Partial<FeedbackTranslations>;
};
};
```
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="autofeedbackhandler"></a> `autoFeedbackHandler`?
</td>
<td>
[`FeedbackPromptHandler`](globals.md#feedbackprompthandler)
</td>
<td>
‐
</td>
</tr>
<tr>
<td>
<a id="enableautofeedback"></a> `enableAutoFeedback`?
</td>
<td>
`boolean`
</td>
<td>
Enables automatic feedback prompting if it's set up in Reflag
</td>
</tr>
<tr>
<td>
<a id="ui"></a> `ui`?
</td>
<td>
\{
`position`: [`Position`](globals.md#position-1);
`translations`: [`Partial`](https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype)\<[`FeedbackTranslations`](globals.md#feedbacktranslations)\>;
\}
</td>
<td>
With these options you can override the look of the feedback prompt
</td>
</tr>
<tr>
<td>
`ui.position`?
</td>
<td>
[`Position`](globals.md#position-1)
</td>
<td>
Control the placement and behavior of the feedback form.
</td>
</tr>
<tr>
<td>
`ui.translations`?
</td>
<td>
[`Partial`](https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype)\<[`FeedbackTranslations`](globals.md#feedbacktranslations)\>
</td>
<td>
Add your own custom translations for the feedback form.
Undefined translation keys fall back to english defaults.
</td>
</tr>
</tbody>
</table>
***
### FeedbackPrompt
```ts
type FeedbackPrompt = {
featureId: string;
promptId: string;
question: string;
showAfter: Date;
showBefore: Date;
};
```
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="featureid"></a> `featureId`
</td>
<td>
`string`
</td>
<td>
Feature ID from Reflag
</td>
</tr>
<tr>
<td>
<a id="promptid"></a> `promptId`
</td>
<td>
`string`
</td>
<td>
Id of the prompt
</td>
</tr>
<tr>
<td>
<a id="question-2"></a> `question`
</td>
<td>
`string`
</td>
<td>
Specific question user was asked
</td>
</tr>
<tr>
<td>
<a id="showafter"></a> `showAfter`
</td>
<td>
[`Date`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Date)
</td>
<td>
Feedback prompt should appear only after this time
</td>
</tr>
<tr>
<td>
<a id="showbefore"></a> `showBefore`
</td>
<td>
[`Date`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Date)
</td>
<td>
Feedback prompt will not be shown after this time
</td>
</tr>
</tbody>
</table>
***
### FeedbackPromptHandler()
```ts
type FeedbackPromptHandler = (prompt: FeedbackPrompt, handlers: FeedbackPromptHandlerCallbacks) => void;
```
#### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`prompt`
</td>
<td>
[`FeedbackPrompt`](globals.md#feedbackprompt)
</td>
</tr>
<tr>
<td>
`handlers`
</td>
<td>
[`FeedbackPromptHandlerCallbacks`](globals.md#feedbackprompthandlercallbacks)
</td>
</tr>
</tbody>
</table>
#### Returns
`void`
***
### FeedbackPromptHandlerCallbacks
```ts
type FeedbackPromptHandlerCallbacks = {
openFeedbackForm: (options: FeedbackPromptHandlerOpenFeedbackFormOptions) => void;
reply: FeedbackPromptReplyHandler;
};
```
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="openfeedbackform"></a> `openFeedbackForm`
</td>
<td>
(`options`: [`FeedbackPromptHandlerOpenFeedbackFormOptions`](globals.md#feedbackprompthandleropenfeedbackformoptions)) => `void`
</td>
</tr>
<tr>
<td>
<a id="reply"></a> `reply`
</td>
<td>
[`FeedbackPromptReplyHandler`](globals.md#feedbackpromptreplyhandler)
</td>
</tr>
</tbody>
</table>
***
### FeedbackPromptHandlerOpenFeedbackFormOptions
```ts
type FeedbackPromptHandlerOpenFeedbackFormOptions = Omit<RequestFeedbackOptions,
| "featureId"
| "flagKey"
| "userId"
| "companyId"
| "onClose"
| "onDismiss">;
```
***
### FeedbackPromptReply
```ts
type FeedbackPromptReply = {
comment: string;
companyId: string;
question: string;
score: number;
};
```
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="comment-1"></a> `comment`?
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
<a id="companyid"></a> `companyId`?
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
<a id="question-3"></a> `question`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
<a id="score-2"></a> `score`?
</td>
<td>
`number`
</td>
</tr>
</tbody>
</table>
***
### FeedbackPromptReplyHandler()
```ts
type FeedbackPromptReplyHandler = <T>(reply: T) => T extends null ? Promise<void> : Promise<{
feedbackId: string;
}>;
```
#### Type Parameters
<table>
<thead>
<tr>
<th>Type Parameter</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`T` *extends* [`FeedbackPromptReply`](globals.md#feedbackpromptreply) \| `null`
</td>
</tr>
</tbody>
</table>
#### Parameters
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`reply`
</td>
<td>
`T`
</td>
</tr>
</tbody>
</table>
#### Returns
`T` *extends* `null` ? [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<`void`\> : [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<\{
`feedbackId`: `string`;
\}\>
***
### FeedbackTranslations
```ts
type FeedbackTranslations = {
DefaultQuestionLabel: string;
QuestionPlaceholder: string;
ScoreDissatisfiedLabel: string;
ScoreNeutralLabel: string;
ScoreSatisfiedLabel: string;
ScoreStatusDescription: string;
ScoreStatusLoading: string;
ScoreStatusReceived: string;
ScoreVeryDissatisfiedLabel: string;
ScoreVerySatisfiedLabel: string;
SendButton: string;
SuccessMessage: string;
};
```
You can use this to override text values in the feedback form
with desired language translation
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="defaultquestionlabel"></a> `DefaultQuestionLabel`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
<a id="questionplaceholder"></a> `QuestionPlaceholder`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
<a id="scoredissatisfiedlabel"></a> `ScoreDissatisfiedLabel`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
<a id="scoreneutrallabel"></a> `ScoreNeutralLabel`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
<a id="scoresatisfiedlabel"></a> `ScoreSatisfiedLabel`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
<a id="scorestatusdescription"></a> `ScoreStatusDescription`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
<a id="scorestatusloading"></a> `ScoreStatusLoading`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
<a id="scorestatusreceived"></a> `ScoreStatusReceived`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
<a id="scoreverydissatisfiedlabel"></a> `ScoreVeryDissatisfiedLabel`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
<a id="scoreverysatisfiedlabel"></a> `ScoreVerySatisfiedLabel`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
<a id="sendbutton"></a> `SendButton`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
<a id="successmessage"></a> `SuccessMessage`
</td>
<td>
`string`
</td>
</tr>
</tbody>
</table>
***
### FlagOverrides
```ts
type FlagOverrides = Record<string, boolean | undefined>;
```
***
### FlagRemoteConfig
```ts
type FlagRemoteConfig =
| {
key: string;
payload: any;
}
| {
key: undefined;
payload: undefined;
};
```
A remotely managed configuration value for a flag.
#### Type declaration
\{
`key`: `string`;
`payload`: `any`;
\}
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`key`
</td>
<td>
`string`
</td>
<td>
The key of the matched configuration value.
</td>
</tr>
<tr>
<td>
`payload`
</td>
<td>
`any`
</td>
<td>
The optional user-supplied payload data.
</td>
</tr>
</tbody>
</table>
\{
`key`: `undefined`;
`payload`: `undefined`;
\}
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`key`
</td>
<td>
`undefined`
</td>
</tr>
<tr>
<td>
`payload`
</td>
<td>
`undefined`
</td>
</tr>
</tbody>
</table>
***
### InitOptions
```ts
type InitOptions = ReflagDeprecatedContext & {
apiBaseUrl: string;
appBaseUrl: string;
bootstrappedFlags: RawFlags;
credentials: "include" | "same-origin" | "omit";
enableTracking: boolean;
expireTimeMs: number;
fallbackFlags: | string[]
| Record<string, FallbackFlagOverride>;
feedback: FeedbackOptions;
logger: Logger;
offline: boolean;
publishableKey: string;
sdkVersion: string;
sseBaseUrl: string;
staleTimeMs: number;
staleWhileRevalidate: boolean;
timeoutMs: number;
toolbar: ToolbarOptions;
};
```
ReflagClient initialization options.
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`apiBaseUrl`?
</td>
<td>
`string`
</td>
<td>
Base URL of Reflag servers. You can override this to use your mocked server.
</td>
</tr>
<tr>
<td>
`appBaseUrl`?
</td>
<td>
`string`
</td>
<td>
Base URL of the Reflag web app. Links open ín this app by default.
</td>
</tr>
<tr>
<td>
`bootstrappedFlags`?
</td>
<td>
[`RawFlags`](globals.md#rawflags)
</td>
<td>
Pre-fetched flags to be used instead of fetching them from the server.
</td>
</tr>
<tr>
<td>
`credentials`?
</td>
<td>
`"include"` \| `"same-origin"` \| `"omit"`
</td>
<td>
When proxying requests, you may want to include credentials like cookies
so you can authorize the request in the proxy.
This option controls the `credentials` option of the fetch API.
</td>
</tr>
<tr>
<td>
`enableTracking`?
</td>
<td>
`boolean`
</td>
<td>
Whether to enable tracking. Defaults to `true`.
</td>
</tr>
<tr>
<td>
`expireTimeMs`?
</td>
<td>
`number`
</td>
<td>
If set, flags will be cached between page loads for this duration
</td>
</tr>
<tr>
<td>
`fallbackFlags`?
</td>
<td>
\| `string`[]
\| [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)\<`string`, [`FallbackFlagOverride`](globals.md#fallbackflagoverride)\>
</td>
<td>
Flag keys for which `isEnabled` should fallback to true
if SDK fails to fetch flags from Reflag servers. If a record
is supplied instead of array, the values of each key represent the
configuration values and `isEnabled` is assume `true`.
</td>
</tr>
<tr>
<td>
`feedback`?
</td>
<td>
[`FeedbackOptions`](globals.md#feedbackoptions)
</td>
<td>
AutoFeedback specific configuration
</td>
</tr>
<tr>
<td>
`logger`?
</td>
<td>
[`Logger`](globals.md#logger-1)
</td>
<td>
You can provide a logger to see the logs of the network calls.
This is undefined by default.
For debugging purposes you can just set the browser console to this property:
```javascript
options.logger = window.console;
```
</td>
</tr>
<tr>
<td>
`offline`?
</td>
<td>
`boolean`
</td>
<td>
Whether to enable offline mode. Defaults to `false`.
</td>
</tr>
<tr>
<td>
`publishableKey`
</td>
<td>
`string`
</td>
<td>
Publishable key for authentication
</td>
</tr>
<tr>
<td>
`sdkVersion`?
</td>
<td>
`string`
</td>
<td>
Version of the SDK
</td>
</tr>
<tr>
<td>
`sseBaseUrl`?
</td>
<td>
`string`
</td>
<td>
Base URL of Reflag servers for SSE connections used by AutoFeedback.
</td>
</tr>
<tr>
<td>
`staleTimeMs`?
</td>
<td>
`number`
</td>
<td>
Stale flags will be returned if staleWhileRevalidate is true if no new flags can be fetched
</td>
</tr>
<tr>
<td>
`staleWhileRevalidate`?
</td>
<td>
`boolean`
</td>
<td>
If set to true stale flags will be returned while refetching flags
</td>
</tr>
<tr>
<td>
`timeoutMs`?
</td>
<td>
`number`
</td>
<td>
Timeout in milliseconds when fetching flags
</td>
</tr>
<tr>
<td>
`toolbar`?
</td>
<td>
[`ToolbarOptions`](globals.md#toolbaroptions)
</td>
<td>
Toolbar configuration
</td>
</tr>
</tbody>
</table>
***
### Offset
```ts
type Offset = {
x: string | number;
y: string | number;
};
```
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="x"></a> `x`?
</td>
<td>
`string` \| `number`
</td>
<td>
Offset from the nearest horizontal screen edge after placement is resolved
</td>
</tr>
<tr>
<td>
<a id="y"></a> `y`?
</td>
<td>
`string` \| `number`
</td>
<td>
Offset from the nearest vertical screen edge after placement is resolved
</td>
</tr>
</tbody>
</table>
***
### PopoverPlacement
```ts
type PopoverPlacement = Placement;
```
***
### Position
```ts
type Position =
| {
type: "MODAL";
}
| {
offset: Offset;
placement: DialogPlacement;
type: "DIALOG";
}
| {
anchor: | HTMLElement
| null;
placement: PopoverPlacement;
type: "POPOVER";
};
```
***
### RawFlag
```ts
type RawFlag = {
config: {
key: string;
missingContextFields: string[];
payload: any;
ruleEvaluationResults: boolean[];
version: number;
};
isEnabled: boolean;
isEnabledOverride: boolean | null;
key: string;
missingContextFields: string[];
ruleEvaluationResults: boolean[];
targetingVersion: number;
};
```
A flag fetched from the server.
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="config-2"></a> `config`?
</td>
<td>
\{
`key`: `string`;
`missingContextFields`: `string`[];
`payload`: `any`;
`ruleEvaluationResults`: `boolean`[];
`version`: `number`;
\}
</td>
<td>
Optional user-defined dynamic configuration.
</td>
</tr>
<tr>
<td>
`config.key`
</td>
<td>
`string`
</td>
<td>
The key of the matched configuration value.
</td>
</tr>
<tr>
<td>
`config.missingContextFields`?
</td>
<td>
`string`[]
</td>
<td>
The missing context fields.
</td>
</tr>
<tr>
<td>
`config.payload`?
</td>
<td>
`any`
</td>
<td>
The optional user-supplied payload data.
</td>
</tr>
<tr>
<td>
`config.ruleEvaluationResults`?
</td>
<td>
`boolean`[]
</td>
<td>
The rule evaluation results.
</td>
</tr>
<tr>
<td>
`config.version`?
</td>
<td>
`number`
</td>
<td>
The version of the matched configuration value.
</td>
</tr>
<tr>
<td>
<a id="isenabled-1"></a> `isEnabled`
</td>
<td>
`boolean`
</td>
<td>
Result of flag evaluation.
Note: does not take local overrides into account.
</td>
</tr>
<tr>
<td>
<a id="isenabledoverride-1"></a> `isEnabledOverride`?
</td>
<td>
`boolean` \| `null`
</td>
<td>
If not null or undefined, the result is being overridden locally
</td>
</tr>
<tr>
<td>
<a id="key-2"></a> `key`
</td>
<td>
`string`
</td>
<td>
Flag key.
</td>
</tr>
<tr>
<td>
<a id="missingcontextfields-1"></a> `missingContextFields`?
</td>
<td>
`string`[]
</td>
<td>
Missing context fields.
</td>
</tr>
<tr>
<td>
<a id="ruleevaluationresults-1"></a> `ruleEvaluationResults`?
</td>
<td>
`boolean`[]
</td>
<td>
Rule evaluation results.
</td>
</tr>
<tr>
<td>
<a id="targetingversion"></a> `targetingVersion`?
</td>
<td>
`number`
</td>
<td>
Version of targeting rules.
</td>
</tr>
</tbody>
</table>
***
### RawFlags
```ts
type RawFlags = Record<string, RawFlag>;
```
***
### RequestFeedbackData
```ts
type RequestFeedbackData = Omit<OpenFeedbackFormOptions, "key" | "onSubmit"> & {
companyId: string;
flagKey: string;
onAfterSubmit: (data: FeedbackSubmission) => void;
};
```
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`companyId`?
</td>
<td>
`string`
</td>
<td>
Company ID from your own application.
</td>
</tr>
<tr>
<td>
`flagKey`
</td>
<td>
`string`
</td>
<td>
Flag key.
</td>
</tr>
<tr>
<td>
`onAfterSubmit`?
</td>
<td>
(`data`: [`FeedbackSubmission`](globals.md#feedbacksubmission)) => `void`
</td>
<td>
Allows you to handle a copy of the already submitted
feedback.
This can be used for side effects, such as storing a
copy of the feedback in your own application or CRM.
</td>
</tr>
</tbody>
</table>
***
### RequestFeedbackOptions
```ts
type RequestFeedbackOptions = RequestFeedbackData & {
userId: string;
};
```
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
`userId`
</td>
<td>
`string`
</td>
<td>
User ID from your own application.
</td>
</tr>
</tbody>
</table>
***
### State
```ts
type State = "idle" | "initializing" | "initialized" | "stopped";
```
State of the client.
***
### ToolbarOptions
```ts
type ToolbarOptions =
| boolean
| {
position: ToolbarPosition;
show: boolean;
};
```
Toolbar options.
***
### TrackEvent
```ts
type TrackEvent = {
attributes: | Record<string, any>
| null;
company: CompanyContext;
eventName: string;
user: UserContext;
};
```
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="attributes"></a> `attributes`?
</td>
<td>
\| [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)\<`string`, `any`\>
\| `null`
</td>
</tr>
<tr>
<td>
<a id="company-3"></a> `company`?
</td>
<td>
[`CompanyContext`](globals.md#companycontext)
</td>
</tr>
<tr>
<td>
<a id="eventname"></a> `eventName`
</td>
<td>
`string`
</td>
</tr>
<tr>
<td>
<a id="user-3"></a> `user`
</td>
<td>
[`UserContext`](globals.md#usercontext)
</td>
</tr>
</tbody>
</table>
***
### UnassignedFeedback
```ts
type UnassignedFeedback = {
comment: string;
feedbackId: string;
flagKey: string;
promptedQuestion: string;
promptId: string;
question: string;
score: number;
source: "prompt" | "sdk" | "widget";
};
```
#### Type declaration
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a id="comment-2"></a> `comment`?
</td>
<td>
`string`
</td>
<td>
User supplied comment about your flag.
</td>
</tr>
<tr>
<td>
<a id="feedbackid-3"></a> `feedbackId`?
</td>
<td>
`string`
</td>
<td>
Reflag feedback ID
</td>
</tr>
<tr>
<td>
<a id="flagkey"></a> `flagKey`
</td>
<td>
`string`
</td>
<td>
Flag key.
</td>
</tr>
<tr>
<td>
<a id="promptedquestion"></a> `promptedQuestion`?
</td>
<td>
`string`
</td>
<td>
The original question.
This only needs to be populated if the feedback was submitted through the automated feedback surveys channel.
</td>
</tr>
<tr>
<td>
<a id="promptid-1"></a> `promptId`?
</td>
<td>
`string`
</td>
<td>
Reflag feedback prompt ID.
This only exists if the feedback was submitted
as part of an automated prompt from Reflag.
Used for internal state management of automated
feedback.
</td>
</tr>
<tr>
<td>
<a id="question-4"></a> `question`?
</td>
<td>
`string`
</td>
<td>
The question that was presented to the user.
</td>
</tr>
<tr>
<td>
<a id="score-3"></a> `score`?
</td>
<td>
`number`
</td>
<td>
Customer satisfaction score.
</td>
</tr>
<tr>
<td>
<a id="source"></a> `source`?
</td>
<td>
`"prompt"` \| `"sdk"` \| `"widget"`
</td>
<td>
Source of the feedback, depending on how the user was asked
- `prompt` - Feedback submitted by way of an automated feedback survey (prompted)
- `widget` - Feedback submitted via `requestFeedback`
- `sdk` - Feedback submitted via `feedback`
</td>
</tr>
</tbody>
</table>
## Variables
### DEFAULT\_TRANSLATIONS
```ts
const DEFAULT_TRANSLATIONS: FeedbackTranslations;
```
```tsx
import { FeedbackTranslations } from "../types";
/**
* {@includeCode ./defaultTranslations.tsx}
*/
export const DEFAULT_TRANSLATIONS: FeedbackTranslations = {
DefaultQuestionLabel: "How satisfied are you with this feature?",
QuestionPlaceholder: "Write a comment",
ScoreStatusDescription: "Pick a score and leave a comment",
ScoreStatusLoading: "Saving score, please wait...",
ScoreStatusReceived: "Score has been received!",
ScoreVeryDissatisfiedLabel: "Very dissatisfied (1/5)",
ScoreDissatisfiedLabel: "Dissatisfied (2/5)",
ScoreNeutralLabel: "Neutral (3/5)",
ScoreSatisfiedLabel: "Satisfied (4/5)",
ScoreVerySatisfiedLabel: "Very satisfied (5/5)",
SuccessMessage: "Feedback received, thank you!",
SendButton: "Send feedback",
};
```
***
### feedbackContainerId
```ts
const feedbackContainerId: "reflag-feedback-dialog-container" = "reflag-feedback-dialog-container";
```
ID of HTML DIV element which contains the feedback dialog
***
### propagatedEvents
```ts
const propagatedEvents: string[];
```
These events will be propagated to the feedback dialog
#### See
[https://developer.mozilla.org/en-US/docs/Web/API/Element#events](https://developer.mozilla.org/en-US/docs/Web/API/Element#events)
```
