Installation

yarn add flagsup-js

or

npm install flagsup-js

Integration

• Docs: Integration doc
• Init client

  import FlagSup from 'flagsup-js';
  FlagSup.init({
    target: "https://flagsup.tekoapis.com",
    userId: "5f8e4768e00e4d12ba69ed3e7bf3e893" // optional, use IAM ID // pragma: whitelist secret
  })

• To get flag status (and experiment info if available) for a specific user using User IAM ID
  • batchEvaluateFlags(<flag_key_list>, [<default_status>, <default_treatment>, <default_exp_id>, <default_branch_id>])
  • evaluateFlag(<flag_key_list>, [<default_status>, <default_treatment>, <default_exp_id>, <default_branch_id>])
• To get flag status when user is not logged in (note: this will disable canary release, black/white list, experiment)
  • batchGetFlags(<flag_key_list>, [<default_status>])
  • getFlag(<flag_key>, [<default_status>])
• Integrate with Tracker-js sdk for experiment metrics tracking
  • Use batchEvaluateFlags to fetch all experiment flags
  • Calls track("setLabelProp", FlagSup.getTrackerLabel(), FlagSup.getTrackerContent()) to store experiment branches info

Example

import React, { useEffect } from 'react';
import FlagSup from 'flagsup-js';

const App = () => {

  useEffect(() => {
    // Log user in with IAM
    // ...

    // Initialisation, provide FlagSup SDK with target domain and userId from IAM (if available)
    FlagSup.init({
      target: "https://flagsup.tekoapis.com",
      userId: "5f8e4768e00e4d12ba69ed3e7bf3e893", // optional // pragma: whitelist secret
      useCacheRefresh: true, // optional, whether to use batch to refresh cache
      refreshInterval: refreshInterval, // optional, set refresh interval (secs) for cache
    })
    // Use getFlag() and batchGetFlags() for flows without/before getting user IAM ID

    // Option 1: Get flags with User ID

    // Fetch multiple flag values for the logged in user. Response is cached in memory for subsequent calls. 
    // Refresh every `refreshInterval`
    FlagSup.batchEvaluateFlags(
      ['flag01', 'flag03'], // Flags to evaluate
      false, // Default status
      "default_treatment", // Default treatment, for experiment only
      0, // Default experiment ID, for experiment only
      0, // Default experiment branch ID, for experiment only
    ).then((flags) => {
      console.log(flags)
    });

    // (Optional) Update tracker JS SDK with experiment branch IDs
    track("setLabelProp", FlagSup.getTrackerLabel(), FlagSup.getTrackerContent())

    // Fetch a flag value for the logged in user. Response is cached in memory for subsequent calls.
    // Refresh every `refreshInterval`
    FlagSup.evaluateFlag(
      'flag01', // flag to evaluate
      false, // Default status
      "default_treatment", // Default treatment, for experiment only
      0, // Default experiment ID, for experiment only
      0, // Default experiment branch ID, for experiment only
    ).then((flag) => {
      console.log(flag);
      if (flag.enabled) {
        // Flow when flag is enabled
      }
      else {
        // Flow when flag is disabled
      }
    });

    // Option 2: Get flags without User ID
    // Note: it is recommended to use this ONLY when you don't have user IAM ID

    // Fetch multiple flag values. Response is cached in memory for subsequent calls. Refresh with 
    // To reduce network overhead, call this to fetch all flags when your app initialise
    FlagSup.batchGetFlags(
      ['flag01', 'flag02'], // Flags to evaluate
      false, // Default status
    ).then((flags) => {
      console.log(flags)
    });

    // Fetch a single flag value. Response is cached in memory for subsequent calls.
    FlagSup.getFlag(
      'flag01', // Flags to evaluate
      false, // Default status
    ).then((flag) => {
      console.log(flag);
      if (flag.enabled) {
        // Flow when flag is enabled
      }
      else {
        // Flow when flag is disabled
      }
    });

    // Flags are cached locally. To flush, use FlagSup.flushFlags()
  }, [])

  return (
    <div className="App">
    </div>
  );
}

export default App;