Feedtack

Roll Feedtack out to a cohort with any feature-flag service. Feedtack has no flag dependency; you pass it the result.

Mount the provider only when the flag is true

Render your page unconditionally and add the provider only when the flag is strictly true. Key it by the user's distinct id so a change of identity gives a fresh provider.

function App({ children }: { children: React.ReactNode }) {
  const flag = useFeatureFlag('feedtack-enabled') // true | false | string | undefined
  const user = useCurrentUser()

  if (flag !== true) return <>{children}</>

  return (
    <FeedtackProvider key={user.id} adapter={adapter} currentUser={user}>
      {children}
    </FeedtackProvider>
  )
}

Compare with === true: while flags are loading the value is undefined, and multivariate flags return strings. Neither should show Feedtack.

Turning the flag off unmounts the provider and removes its UI and hotkey. Turning it on again mounts it cleanly.

Or toggle disabled

disabled={flag !== true} also works. While disabled, the provider renders only its children, injects no Feedtack root or styles, binds no hotkey and loads no feedback. When disabled becomes false, Feedtack mounts fully; when it becomes true again the UI is removed and any open pin mode or modal is closed. useFeedtack() stays safe to call throughout: while disabled, the actions it returns do nothing and isPinModeActive and isModalOpen read false.

currentUser changes (for example anonymous to identified) are picked up immediately, for submits and for which archived pins are hidden, so the key above is optional.

On this page