Context

This demo is easiest to understand if you open its source code in a parallel tab.

Source code

This demo shows how to propagate the flag bag through the context.

The useFlags() hook of HappyKit should only be used once per Next.js route, at the top level of the default exported page. You should then pass the feature flags down to each component that needs access to them using props.

But some developers might prefer being able to use context instead. This demo shows how to use FlagBagProvider and the useFlagBag()hook to put the flagBag into context and how to access it from a nested component.

Render #1 (Current render)
{
  flags: {
    ads: true,
    checkout: "medium",
    discount: 5,
    purchaseButtonLabel: "Add to cart"
  },
  data: {
    flags: {
      ads: true,
      checkout: "medium",
      discount: 5,
      purchaseButtonLabel: "Add to cart"
    },
    resolvedVariantIds: {
      ads: "on",
      checkout: "off",
      discount: "on",
      purchaseButtonLabel: "1617982706033"
    },
    visitor: {
      key: "UnRRU3fEea4E26uvUvS1y"
    }
  },
  error: null,
  fetching: false,
  settled: true,
  visitorKey: "UnRRU3fEea4E26uvUvS1y"
}