ApexDocsOpen Apex
Developer

Feature flags in code

Define, evaluate, and read typed Apex feature flag values from the SDK.

Apex feature flags are experiment-backed. A flag is on when the visitor is assigned to a non-control variation. Typed values come from the assigned variation value.

Define a flag

ts
import { defineFlagExperiment, init } from "@drip-apex/sdk";
 
const checkoutCopyFlag = defineFlagExperiment({
  slug: "checkout-cta-copy",
  name: "Checkout CTA copy",
  rolloutPercent: 50,
  offValue: "Continue to checkout",
  onValue: "Secure my order"
});
 
init({
  experiments: [checkoutCopyFlag],
  endpoint: "https://events.drip-apex.com"
});

defineFlagExperiment creates two variations:

VariationWeightValueMeaning
control1 - rolloutPercent / 100offValue or falseFlag off.
enabledrolloutPercent / 100onValue or trueFlag on.

Evaluate from initialized SDK state

ts
import { evaluateFlag, evaluateFlagValue } from "@drip-apex/sdk";
 
const enabled = evaluateFlag("checkout-progress-ui");
const ctaCopy = evaluateFlagValue("checkout-cta-copy", "Continue to checkout");

Pass context when evaluating outside the current page URL or current SDK attributes:

ts
const enabled = evaluateFlag("checkout-progress-ui", {
  url: "https://example-store.test/products/demo-product",
  userId: "user-example-123",
  attributes: {
    customer_tier: "vip"
  }
});

Evaluate a standalone experiment list

The @drip-apex/sdk/flags subpath exposes pure helpers that accept an experiment array:

ts
import { defineFlagExperiment, evaluateFlagValue } from "@drip-apex/sdk/flags";
 
const flag = defineFlagExperiment({
  slug: "search-layout",
  name: "Search layout",
  rolloutPercent: 10,
  onValue: "compact",
  offValue: "default"
});
 
const layout = evaluateFlagValue("search-layout", [flag], {
  userId: "user-example-123",
  url: "https://example-store.test/search"
}, "default");

React flag hooks

tsx
import { useFeatureFlag, useFeatureFlagValue } from "@drip-apex/sdk/react";
 
function SearchResults() {
  const compact = useFeatureFlag("search-layout");
  const columns = useFeatureFlagValue("search-columns", 3);
 
  return <ResultsGrid compact={compact} columns={Number(columns)} />;
}