Reference
Interfaces
CheckEvent
Event representing checking the flag evaluation result
Properties
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
id
undefined
| string
| number
Company id
name?
string
Company name
Flag<TConfig>
Describes a feature
Type Parameters
TConfig
extends FlagType
["config"
]
Properties
isEnabled
boolean
If the feature is enabled.
isLoading
boolean
If the feature is loading.
key
string
The key of the feature.
Methods
track()
track():
| undefined
| Promise<
| undefined
| Response>
Track feature usage in Reflag.
Returns
| undefined
| Promise
< | undefined
| Response
>
Flags
UserContext
Indexable
[key: string]: undefined | string | number
Properties
email?
string
User email
id
undefined
| string
| number
User id
name?
string
User name
Type Aliases
EmptyFlagRemoteConfig
type EmptyFlagRemoteConfig = {
key: undefined;
payload: undefined;
};
Type declaration
key
undefined
payload
undefined
FlagKey
type FlagKey = keyof TypedFlags;
FlagRemoteConfig
type FlagRemoteConfig =
| {
key: string;
payload: any;
}
| EmptyFlagRemoteConfig;
A remotely managed configuration value for a feature.
Type declaration
{ key
: string
; payload
: any
; }
key
string
The key of the matched configuration value.
payload
any
The optional user-supplied payload data.
FlagType
type FlagType = {
config: {
payload: any;
};
};
Type declaration
config
?
{ payload
: any
; }
config.payload
any
RawFlags
type RawFlags = Record<string, RawFlag>;
ReflagProps
type ReflagProps = ReflagContext & InitOptions & {
children: ReactNode;
debug: boolean;
loadingComponent: ReactNode;
newReflagClient: (...args: ConstructorParameters<typeof ReflagClient>) => ReflagClient;
};
Props for the ReflagProvider.
Type declaration
children
?
ReactNode
Children to be rendered.
debug
?
boolean
Whether to enable debug mode (optional).
loadingComponent
?
ReactNode
Loading component to be rendered while features are loading.
newReflagClient
?
(...args
: ConstructorParameters
<typeof ReflagClient
>) => ReflagClient
Internal
New ReflagClient constructor.
RequestFeedbackOptions
type RequestFeedbackOptions = Omit<RequestFeedbackData, "flagKey" | "featureId">;
TrackEvent
type TrackEvent = {
attributes: | Record<string, any>
| null;
company: CompanyContext;
eventName: string;
user: UserContext;
};
Type declaration
TypedFlags
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
ReflagProvider()
function ReflagProvider(__namedParameters: ReflagProps): Element
Provider for the ReflagClient.
Parameters
__namedParameters
Returns
Element
useClient()
function useClient(): undefined | ReflagClient
Returns the current ReflagClient
used by the ReflagProvider
.
This is useful if you need to access the ReflagClient
outside of the ReflagProvider
.
const client = useClient();
useEffect(() => {
return client?.on("check", () => {
console.log("check hook called");
});
}, [client]);
Returns
undefined
| ReflagClient
useFeature()
function useFeature<TKey>(key: TKey): Flag
Type Parameters
TKey
extends string
Parameters
key
TKey
Returns
Deprecated
use useFlag
instead
useFlag()
function useFlag<TKey>(key: TKey): TypedFlags[TKey]
Returns the state of a given feature for the current context, e.g.
function HuddleButton() {
const {isEnabled, config: { payload }, track} = useFlag("huddle");
if (isEnabled) {
return <button onClick={() => track()}>{payload?.buttonTitle ?? "Start Huddle"}</button>;
}
Type Parameters
TKey
extends string
Parameters
key
TKey
Returns
TypedFlags
[TKey
]
useRequestFeedback()
function useRequestFeedback(): (options: RequestFeedbackData) => undefined | void
Returns a function to open up the feedback form Note: When calling useRequestFeedback
, user/company must already be set.
See link for more information
const requestFeedback = useRequestFeedback();
reflag.requestFeedback({
flagKey: "file-uploads",
title: "How satisfied are you with file uploads?",
});
Returns
Function
Parameters
options
Returns
undefined
| void
useSendFeedback()
function useSendFeedback(): (opts: UnassignedFeedback) =>
| undefined
| 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 for more information
const sendFeedback = useSendFeedback();
sendFeedback({
flagKey: "huddle";
question: "How did you like the new huddle feature?";
score: 5;
comment: "I loved it!";
});
Returns
Function
Parameters
Returns
| undefined
| Promise
< | undefined
| Response
>
useTrack()
function useTrack(): (eventName: string, attributes?:
| null
| Record<string, any>) =>
| undefined
| 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.
const track = useTrack();
track("Started Huddle", { button: "cta" });
Returns
Function
Parameters
eventName
string
attributes
?
| null
| Record
<string
, any
>
Returns
| undefined
| Promise
< | undefined
| Response
>
useUpdateCompany()
function useUpdateCompany(): (opts: {}) =>
| undefined
| 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.
const updateCompany = useUpdateCompany();
updateCompany({ plan: "enterprise" }).then(() => console.log("Flags updated"));
Returns
Function
Parameters
opts
{}
Returns
| undefined
| Promise
<void
>
useUpdateOtherContext()
function useUpdateOtherContext(): (opts: {}) =>
| undefined
| 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.
const updateOtherContext = useUpdateOtherContext();
updateOtherContext({ workspaceId: newWorkspaceId })
.then(() => console.log("Flags updated"));
Returns
Function
Parameters
opts
{}
Returns
| undefined
| Promise
<void
>
useUpdateUser()
function useUpdateUser(): (opts: {}) =>
| undefined
| 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.
const updateUser = useUpdateUser();
updateUser({ optInHuddles: "true" }).then(() => console.log("Flags updated"));
Returns
Function
Parameters
opts
{}
Returns
| undefined
| Promise
<void
>
Last updated
Was this helpful?