Reference

Classes

ReflagClient

ReflagClient lets you interact with the Reflag API.

Constructors

new ReflagClient()

new ReflagClient(opts: InitOptions): ReflagClient

Create a new ReflagClient instance.

Parameters

Parameter	Type
opts	InitOptions

Returns

ReflagClient

Properties

Property	Modifier	Type
logger	readonly	Logger

Methods

feedback()

feedback(payload: Feedback): Promise<
  | undefined
| Response>

Submit user feedback to Reflag. Must include either score or comment, or both.

Parameters

Parameter	Type	Description
payload	Feedback	The feedback details to submit.

Returns

Promise< | undefined | Response>

The server response.

getConfig()

getConfig(): Config

Get the current configuration.

Returns

Config

getFeature()

getFeature(flagKey: string): Flag

Parameters

Parameter	Type
flagKey	string

Returns

Flag

Deprecated

Use getFlag instead.

getFeatures()

getFeatures(): RawFlags

Returns

RawFlags

Deprecated

Use getFlags instead.

getFlag()

getFlag(flagKey: string): Flag

Return a flag. Accessing isEnabled or config will automatically send a check event.

Parameters

Parameter	Type	Description
flagKey	string	The key of the flag to get.

Returns

Flag

A flag.

getFlags()

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

Map of flags.

initialize()

initialize(): Promise<void>

Initialize the Reflag SDK.

Must be called before calling other SDK methods.

Returns

Promise<void>

off()

off<THookType>(type: THookType, handler: (args0: HookArgs[THookType]) => void): void

Remove an event listener

Type Parameters

Type Parameter
THookType extends keyof HookArgs

Parameters

Parameter	Type	Description
type	THookType	Type of event to remove.
handler	(args0: HookArgs[THookType]) => void	The same function that was passed to on.

Returns

void

A function to remove the hook.

on()

on<THookType>(type: THookType, handler: (args0: HookArgs[THookType]) => void): () => void

Add an event listener

Type Parameters

Type Parameter
THookType extends keyof HookArgs

Parameters

Parameter	Type	Description
type	THookType	Type of events to listen for
handler	(args0: HookArgs[THookType]) => void	The function to call when the event is triggered.

Returns

Function

A function to remove the hook.

Returns

void

requestFeedback()

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

Parameter	Type
options	RequestFeedbackData

Returns

void

stop()

stop(): Promise<void>

Stop the SDK. This will stop any automated feedback surveys.

Returns

Promise<void>

track()

track(eventName: string, attributes?: 
  | null
  | Record<string, any>): Promise<
  | undefined
| Response>

Track an event in Reflag.

Parameters

Parameter	Type	Description
eventName	string	The name of the event.
attributes?	| null | Record<string, any>	Any attributes you want to attach to the event.

Returns

Promise< | undefined | Response>

updateCompany()

updateCompany(company: {}): Promise<void>

Update the company context. Performs a shallow merge with the existing company context. Attempting to update the company ID will log a warning and be ignored.

Parameters

Parameter	Type	Description
company	{}	The company details.

Returns

Promise<void>

updateOtherContext()

updateOtherContext(otherContext: {}): Promise<void>

Update the company context. Performs a shallow merge with the existing company context. Updates to the company ID will be ignored.

Parameters

Parameter	Type	Description
otherContext	{}	Additional context.

Returns

Promise<void>

updateUser()

updateUser(user: {}): Promise<void>

Update the user context. Performs a shallow merge with the existing user context. Attempting to update the user ID will log a warning and be ignored.

Parameters

Parameter	Type
user	{}

Returns

Promise<void>

Interfaces

CheckEvent

Event representing checking the flag evaluation result

Properties

Property	Type	Description
action	"check-is-enabled" | "check-config"	check-is-enabled means isEnabled was checked, check-config means config was checked.
key	string	Flag key.
missingContextFields?	string[]	Missing context fields.
ruleEvaluationResults?	boolean[]	Rule evaluation results.
value?	| boolean | { key: string; payload: any; }	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.
version?	number	Version of targeting rules.

---

CompanyContext

Context is a set of key-value pairs. Id should always be present so that it can be referenced to an existing company.

Indexable

[key: string]: undefined | string | number

Properties

Property	Type	Description
id	undefined | string | number	Company id
name?	string	Company name

---

Config

ReflagClient configuration.

Properties

Property	Type	Description
apiBaseUrl	string	Base URL of Reflag servers.
appBaseUrl	string	Base URL of the Reflag web app.
enableTracking	boolean	Whether to enable tracking.
offline	boolean	Whether to enable offline mode.
sseBaseUrl	string	Base URL of Reflag servers for SSE connections used by AutoFeedback.

---

FeedbackScoreSubmission

Properties

Property	Type
feedbackId?	string
question	string
score	number

---

FeedbackSubmission

Properties

Property	Type
comment	string
feedbackId?	string
question	string
score	number

---

Flag

Represents a flag.

Properties

Property	Type	Description
config	FlagRemoteConfig	‐
isEnabled	boolean	Result of flag flag evaluation. Note: Does not take local overrides into account.
isEnabledOverride	null | boolean	The current override status of isEnabled for the flag.
requestFeedback	(options: Omit<RequestFeedbackData, "featureId" | "flagKey">) => void	Function to request feedback for this flag.
track	() => Promise< | undefined | Response>	Function to send analytics events for this flag.

Methods

setIsEnabledOverride()

setIsEnabledOverride(isEnabled: null | boolean): void

Set the override status for isEnabled for the flag. Set to null to remove the override.

Parameters

Parameter	Type
isEnabled	null | boolean

Returns

void

---

HookArgs

Properties

Property	Type	Description
check	CheckEvent	‐
company	CompanyContext	‐
featuresUpdated	RawFlags	Deprecated Use flagsUpdated instead.
flagsUpdated	RawFlags	‐
track	TrackEvent	‐
user	UserContext	‐

---

Logger

Methods

debug()

debug(message: string, ...args: any[]): void

Parameters

Parameter	Type
message	string
...args	any[]

Returns

void

error()

error(message: string, ...args: any[]): void

Parameters

Parameter	Type
message	string
...args	any[]

Returns

void

info()

info(message: string, ...args: any[]): void

Parameters

Parameter	Type
message	string
...args	any[]

Returns

void

warn()

warn(message: string, ...args: any[]): void

Parameters

Parameter	Type
message	string
...args	any[]

Returns

void

---

OnScoreSubmitResult

Properties

Property	Type
feedbackId	string

---

OpenFeedbackFormOptions

Properties

Property	Type	Description
key	string	‐
onClose?	() => void	‐
onDismiss?	() => void	‐
onScoreSubmit?	(data: FeedbackScoreSubmission) => Promise<OnScoreSubmitResult>	‐
onSubmit	(data: FeedbackSubmission) => | void | Promise<void>	‐
openWithCommentVisible?	boolean	Open the form with both the score and comment fields visible. Defaults to false
position?	Position	Control the placement and behavior of the feedback form.
title?	string	‐
translations?	Partial<FeedbackTranslations>	Add your own custom translations for the feedback form. Undefined translation keys fall back to english defaults.

---

ReflagContext

Properties

Property	Type	Description
company?	CompanyContext	Company related context
otherContext?	Record<string, undefined | string | number>	Context which is not related to a user or a company
user?	UserContext	User related context

---

ToolbarPosition

Properties

Property	Type
offset?	Offset
placement	DialogPlacement

---

UserContext

Indexable

[key: string]: undefined | string | number

Properties

Property	Type	Description
email?	string	User email
id	undefined | string | number	User id
name?	string	User name

Type Aliases

DialogPlacement

type DialogPlacement = "bottom-right" | "bottom-left" | "top-right" | "top-left";

---

FallbackFlagOverride

type FallbackFlagOverride = 
  | {
  key: string;
  payload: any;
 }
  | true;

---

Feedback

type Feedback = UnassignedFeedback & {
  companyId: string;
  userId: string;
};

Type declaration

Name	Type	Description
companyId?	string	Company ID from your own application.
userId?	string	User ID from your own application.

---

FeedbackOptions

type FeedbackOptions = {
  autoFeedbackHandler: FeedbackPromptHandler;
  enableAutoFeedback: boolean;
  ui: {
     position: Position;
     translations: Partial<FeedbackTranslations>;
    };
};

Type declaration

Name	Type	Description
autoFeedbackHandler?	FeedbackPromptHandler	‐
enableAutoFeedback?	boolean	Enables automatic feedback prompting if it's set up in Reflag
ui?	{ position: Position; translations: Partial<FeedbackTranslations>; }	With these options you can override the look of the feedback prompt
ui.position?	Position	Control the placement and behavior of the feedback form.
ui.translations?	Partial<FeedbackTranslations>	Add your own custom translations for the feedback form. Undefined translation keys fall back to english defaults.

---

FeedbackPrompt

type FeedbackPrompt = {
  featureId: string;
  promptId: string;
  question: string;
  showAfter: Date;
  showBefore: Date;
};

Type declaration

Name	Type	Description
featureId	string	Feature ID from Reflag
promptId	string	Id of the prompt
question	string	Specific question user was asked
showAfter	Date	Feedback prompt should appear only after this time
showBefore	Date	Feedback prompt will not be shown after this time

---

FeedbackPromptHandler()

type FeedbackPromptHandler = (prompt: FeedbackPrompt, handlers: FeedbackPromptHandlerCallbacks) => void;

Parameters

Parameter	Type
prompt	FeedbackPrompt
handlers	FeedbackPromptHandlerCallbacks

Returns

void

---

FeedbackPromptHandlerCallbacks

type FeedbackPromptHandlerCallbacks = {
  openFeedbackForm: (options: FeedbackPromptHandlerOpenFeedbackFormOptions) => void;
  reply: FeedbackPromptReplyHandler;
};

Type declaration

Name	Type
openFeedbackForm	(options: FeedbackPromptHandlerOpenFeedbackFormOptions) => void
reply	FeedbackPromptReplyHandler

---

FeedbackPromptHandlerOpenFeedbackFormOptions

type FeedbackPromptHandlerOpenFeedbackFormOptions = Omit<RequestFeedbackOptions, 
  | "featureId"
  | "flagKey"
  | "userId"
  | "companyId"
  | "onClose"
| "onDismiss">;

---

FeedbackPromptReply

type FeedbackPromptReply = {
  comment: string;
  companyId: string;
  question: string;
  score: number;
};

Type declaration

Name	Type
comment?	string
companyId?	string
question	string
score?	number

---

FeedbackPromptReplyHandler()

type FeedbackPromptReplyHandler = <T>(reply: T) => T extends null ? Promise<void> : Promise<{
  feedbackId: string;
}>;

Type Parameters

Type Parameter
T extends FeedbackPromptReply | null

Parameters

Parameter	Type
reply	T

Returns

T extends null ? Promise<void> : Promise<{ feedbackId: string; }>

---

FeedbackTranslations

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

Name	Type
DefaultQuestionLabel	string
QuestionPlaceholder	string
ScoreDissatisfiedLabel	string
ScoreNeutralLabel	string
ScoreSatisfiedLabel	string
ScoreStatusDescription	string
ScoreStatusLoading	string
ScoreStatusReceived	string
ScoreVeryDissatisfiedLabel	string
ScoreVerySatisfiedLabel	string
SendButton	string
SuccessMessage	string

---

FetchedFlag

type FetchedFlag = {
  config: {
     key: string;
     missingContextFields: string[];
     payload: any;
     ruleEvaluationResults: boolean[];
     version: number;
    };
  isEnabled: boolean;
  key: string;
  missingContextFields: string[];
  ruleEvaluationResults: boolean[];
  targetingVersion: number;
};

A flag fetched from the server.

Type declaration

Name	Type	Description
config?	{ key: string; missingContextFields: string[]; payload: any; ruleEvaluationResults: boolean[]; version: number; }	Optional user-defined dynamic configuration.
config.key	string	The key of the matched configuration value.
config.missingContextFields?	string[]	The missing context fields.
config.payload?	any	The optional user-supplied payload data.
config.ruleEvaluationResults?	boolean[]	The rule evaluation results.
config.version?	number	The version of the matched configuration value.
isEnabled	boolean	Result of flag evaluation. Note: does not take local overrides into account.
key	string	Flag key.
missingContextFields?	string[]	Missing context fields.
ruleEvaluationResults?	boolean[]	Rule evaluation results.
targetingVersion?	number	Version of targeting rules.

---

FlagRemoteConfig

type FlagRemoteConfig = 
  | {
  key: string;
  payload: any;
 }
  | {
  key: undefined;
  payload: undefined;
};

A remotely managed configuration value for a flag.

Type declaration

{ key: string; payload: any; }

Name	Type	Description
key	string	The key of the matched configuration value.
payload	any	The optional user-supplied payload data.

{ key: undefined; payload: undefined; }

Name	Type
key	undefined
payload	undefined

---

InitOptions

type InitOptions = {
  apiBaseUrl: string;
  appBaseUrl: string;
  company: CompanyContext;
  credentials: "include" | "same-origin" | "omit";
  enableTracking: boolean;
  expireTimeMs: number;
  fallbackFlags:   | string[]
     | Record<string, FallbackFlagOverride>;
  feedback: FeedbackOptions;
  logger: Logger;
  offline: boolean;
  otherContext: Record<string, any>;
  publishableKey: string;
  sdkVersion: string;
  sseBaseUrl: string;
  staleTimeMs: number;
  staleWhileRevalidate: boolean;
  timeoutMs: number;
  toolbar: ToolbarOptions;
  user: UserContext;
};

ReflagClient initialization options.

Type declaration

Name	Type	Description
apiBaseUrl?	string	Base URL of Reflag servers. You can override this to use your mocked server.
appBaseUrl?	string	Base URL of the Reflag web app. Links open ín this app by default.
company?	CompanyContext	Company related context. If you provide id Reflag will enrich the evaluation context with company attributes on Reflag servers.
credentials?	"include" | "same-origin" | "omit"	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.
enableTracking?	boolean	Whether to enable tracking. Defaults to true.
expireTimeMs?	number	If set, flags will be cached between page loads for this duration
fallbackFlags?	| string[] | Record<string, FallbackFlagOverride>	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.
feedback?	FeedbackOptions	AutoFeedback specific configuration
logger?	Logger	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: options.logger = window.console;
offline?	boolean	Whether to enable offline mode. Defaults to false.
otherContext?	Record<string, any>	Context not related to users or companies
publishableKey	string	Publishable key for authentication
sdkVersion?	string	Version of the SDK
sseBaseUrl?	string	Base URL of Reflag servers for SSE connections used by AutoFeedback.
staleTimeMs?	number	Stale flags will be returned if staleWhileRevalidate is true if no new flags can be fetched
staleWhileRevalidate?	boolean	If set to true stale flags will be returned while refetching flags
timeoutMs?	number	Timeout in milliseconds when fetching flags
toolbar?	ToolbarOptions	Toolbar configuration
user?	UserContext	User related context. If you provide id Reflag will enrich the evaluation context with user attributes on Reflag servers.

---

Offset

type Offset = {
  x: string | number;
  y: string | number;
};

Type declaration

Name	Type	Description
x?	string | number	Offset from the nearest horizontal screen edge after placement is resolved
y?	string | number	Offset from the nearest vertical screen edge after placement is resolved

---

PopoverPlacement

type PopoverPlacement = Placement;

---

Position

type Position = 
  | {
  type: "MODAL";
 }
  | {
  offset: Offset;
  placement: DialogPlacement;
  type: "DIALOG";
 }
  | {
  anchor:   | HTMLElement
     | null;
  placement: PopoverPlacement;
  type: "POPOVER";
};

---

RawFlag

type RawFlag = FetchedFlag & {
  isEnabledOverride: boolean | null;
};

Type declaration

Name	Type	Description
isEnabledOverride	boolean | null	If not null, the result is being overridden locally

---

RawFlags

type RawFlags = Record<string, RawFlag>;

---

RequestFeedbackData

type RequestFeedbackData = Omit<OpenFeedbackFormOptions, "key" | "onSubmit"> & {
  companyId: string;
  flagKey: string;
  onAfterSubmit: (data: FeedbackSubmission) => void;
};

Type declaration

Name	Type	Description
companyId?	string	Company ID from your own application.
flagKey	string	Flag key.
onAfterSubmit?	(data: FeedbackSubmission) => void	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.

---

RequestFeedbackOptions

type RequestFeedbackOptions = RequestFeedbackData & {
  userId: string;
};

Type declaration

Name	Type	Description
userId	string	User ID from your own application.

---

ToolbarOptions

type ToolbarOptions = 
  | boolean
  | {
  position: ToolbarPosition;
  show: boolean;
};

Toolbar options.

---

TrackEvent

type TrackEvent = {
  attributes:   | Record<string, any>
     | null;
  company: CompanyContext;
  eventName: string;
  user: UserContext;
};

Type declaration

Name	Type
attributes?	| Record<string, any> | null
company?	CompanyContext
eventName	string
user	UserContext

---

UnassignedFeedback

type UnassignedFeedback = {
  comment: string;
  feedbackId: string;
  flagKey: string;
  promptedQuestion: string;
  promptId: string;
  question: string;
  score: number;
  source: "prompt" | "sdk" | "widget";
};

Type declaration

Name	Type	Description
comment?	string	User supplied comment about your flag.
feedbackId?	string	Reflag feedback ID
flagKey	string	Flag key.
promptedQuestion?	string	The original question. This only needs to be populated if the feedback was submitted through the automated feedback surveys channel.
promptId?	string	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.
question?	string	The question that was presented to the user.
score?	number	Customer satisfaction score.
source?	"prompt" | "sdk" | "widget"	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

Variables

DEFAULT_TRANSLATIONS

const DEFAULT_TRANSLATIONS: FeedbackTranslations;

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

const feedbackContainerId: "reflag-feedback-dialog-container" = "reflag-feedback-dialog-container";

ID of HTML DIV element which contains the feedback dialog

---

propagatedEvents

const propagatedEvents: string[];

These events will be propagated to the feedback dialog

See

https://developer.mozilla.org/en-US/docs/Web/API/Element#events