Introduction

This site contains usage examples for @happykit/flags.

Read the README.md file for a full technical setup before you jump into these examples. The examples are intended as reference implementations for the different ways in which the @happykit/flags client can be used.

Make sure you have set up configure() inside of _app.js before continuing with these examples.

Boxes like the one below show the return value of the useFlags() hook. If you do this in your code

const flagBag = useFlags()

then the value of flagBag would be something like

Render #1 (Current render)
{
  flags: {
    ads: true,
    checkout: "medium",
    discount: 5,
    purchaseButtonLabel: "Get it"
  },
  data: {
    flags: {
      ads: true,
      checkout: "medium",
      discount: 5,
      purchaseButtonLabel: "Get it"
    },
    visitor: {
      key: "jy9jlWoINT6RF80ckkVVA"
    }
  },
  error: null,
  fetching: false,
  settled: true,
  visitorKey: "jy9jlWoINT6RF80ckkVVA"
}

We usually call this value the flagBag, as it contains the evaluated feature flags and a bunch of other things you might need.