Reference
Interfaces
CheckEvent
Event representing checking the feature 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
Feature key.
missingContextFields?
string
[]
Missing context fields.
ruleEvaluationResults?
boolean
[]
Rule evaluation results.
value?
| boolean
| { key
: string
; payload
: any
; }
Result of feature flag or configuration evaluation.
If action
is check-is-enabled
, this is the result of the feature 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
Feature<TConfig>
Describes a feature
Type Parameters
TConfig
extends FeatureType
["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 Bucket.
Returns
| undefined
| Promise
<
| undefined
| Response
>
Features
UserContext
Indexable
[key: string]: undefined | string | number
Properties
email?
string
User email
id
undefined
| string
| number
User id
name?
string
User name
Type Aliases
BucketProps
type BucketProps = BucketContext & InitOptions & {
children: ReactNode;
debug: boolean;
loadingComponent: ReactNode;
newBucketClient: (...args: ConstructorParameters<typeof BucketClient>) => BucketClient;
};
Props for the BucketProvider.
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.
newBucketClient
?
(...args
: ConstructorParameters
<typeof BucketClient
>) => BucketClient
Internal
New BucketClient constructor.
EmptyFeatureRemoteConfig
type EmptyFeatureRemoteConfig = {
key: undefined;
payload: undefined;
};
Type declaration
key
undefined
payload
undefined
FeatureKey
type FeatureKey = keyof TypedFeatures;
FeatureRemoteConfig
type FeatureRemoteConfig =
| {
key: string;
payload: any;
}
| EmptyFeatureRemoteConfig;
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.
FeatureType
type FeatureType = {
config: {
payload: any;
};
};
Type declaration
config
?
{payload
: any
;
}
config.payload
any
RawFeatures
type RawFeatures = Record<string, RawFeature>;
RequestFeedbackOptions
type RequestFeedbackOptions = Omit<RequestFeedbackData, "featureKey" | "featureId">;
TrackEvent
type TrackEvent = {
attributes: | Record<string, any>
| null;
company: CompanyContext;
eventName: string;
user: UserContext;
};
Type declaration
TypedFeatures
type TypedFeatures = keyof Features extends never ? Record<string, Feature> : { [TypedFeatureKey in keyof Features]: Features[TypedFeatureKey] extends FeatureType ? Feature<Features[TypedFeatureKey]["config"]> : Feature };
Describes a collection of evaluated feature.
Remarks
This types falls back to a generic Record<string, Feature> if the Features interface has not been extended.
Functions
BucketProvider()
function BucketProvider(__namedParameters: BucketProps): Element
Provider for the BucketClient.
Parameters
__namedParameters
Returns
Element
useClient()
function useClient(): undefined | BucketClient
Returns the current BucketClient
used by the BucketProvider
.
This is useful if you need to access the BucketClient
outside of the BucketProvider
.
const client = useClient();
useEffect(() => {
return client?.on("check", () => {
console.log("check hook called");
});
}, [client]);
Returns
undefined
| BucketClient
useFeature()
function useFeature<TKey>(key: TKey): TypedFeatures[TKey]
Returns the state of a given feature for the current context, e.g.
function HuddleButton() {
const {isEnabled, config: { payload }, track} = useFeature("huddle");
if (isEnabled) {
return <button onClick={() => track()}>{payload?.buttonTitle ?? "Start Huddle"}</button>;
}
Type Parameters
TKey
extends string
Parameters
key
TKey
Returns
TypedFeatures
[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();
bucket.requestFeedback({
featureKey: "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({
featureKey: "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("Features 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("Features 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("Features updated"));
Returns
Function
Parameters
opts
{}
Returns
| undefined
| Promise
<void
>
Last updated
Was this helpful?