Huddle01 Feature Flags

Community · Documentation

NOTE: Request for access to the huddle01-client pkg on Huddle01's discord or reach out to the team.

Feature Flags

Feature Flags are necessary for multiple usecases, when you need to hide certain features from the end-user for cases like

• Paid features specific to clients.
• Upcoming feature which is still in development so we hide it for incremental dev

Getting flags from Edge Config :

After installing the package, you can fetch the feature flags

import { getEdgeFeatFlags } from '@huddle01/feature-flags';

const featFlags = await getEdgeFeatFlags(configUrl);

console.log({ featFlags });

// Output
{
    "feature-1": {
        enabledFor: ["axit.eth"];
    };
    "feature-2": {
        enabledFor: ["*"]; // enabled for everyone in huddle01 team
    };
}

Syncing Flags to state :

Once you've fetched the feature flags you need to sync them to state which can be done using the useSyncFlags() hook.

import { useSyncFlags } from '@huddle01/feature-flags';

const App = () => {
  useSyncFlags(featFlags);

  return <></>;
};

Using feature flags :

Once you've synced the feature flags you can use a feature flag in the following way:

import { useSyncFlags } from '@huddle01/feature-flags';

const App = () => {
  const { enabledFor, isEnabled } = useFeatureFlag({
    key: 'feature-1',
    address: 'axit.eth',
  });

  console.log({ enabledFor, isEnabled });

  return <></>;
};

// Output
{
  enabledFor: ['axit.eth'];
  isEnabled: true;
}

💡 For more information head to https://huddle01.com/docs

💡 For any help reach out to us on Discord