Context

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: "short",
    discount: 5,
    purchaseButtonLabel: "Purchase"
  },
  data: {
    flags: {
      ads: true,
      checkout: "short",
      discount: 5,
      purchaseButtonLabel: "Purchase"
    },
    visitor: {
      key: "js4srfUxk1-yx1ANuxmRW"
    }
  },
  error: null,
  fetching: false,
  settled: true,
  visitorKey: "js4srfUxk1-yx1ANuxmRW"
}