📘

Feature flags are only available for SDK version 2.0.0 or higher.

When using feature flags, please apply SDK version 2.0.0 or higher when adding dependencies.

A feature flag has an on and off state. You will set different features according to each state.

Once a feature flag is applied, a specific user from your traffic should be able to either receive an on or off status. This on/off status determination can be done through the Hackle SDK.

useFeature

You can use the Hooks API provided by Hackle to receive status results for the user. At this time, you need to pass the feature key, and then implement the logic according to each on/off status.

In the example code below, we are passing feature key 42.

function App() {
  return (
    // Determines the status of the feature flag to assign the user in a feature flag with a feature key of 42.
    // For undetermined cases, users are assigned to false (off status). 
    <Feature featureKey={42}>
      {(featureOn) =>
        featureOn ? (
          <SuperAwesomeFeature /> // Logic for on status
        ) : (
          <AwesomeFeature /> // Logic for off status
        )
      }
    </Feature>
  )
}

function App() {
    // Determines the status of the feature flag to assign the user in a feature flag with a feature key of 42.
    // For undetermined cases, users are assigned to false (off status). 
  const featureOn = useFeature(42)
  return (
    <>
    {
      featureOn ? (
        <SuperAwesomeFeature /> // Logic for on status
      ) : (
        <AwesomeFeature /> // Logic for off status
        )
      )
    }
    </>
  )
}


function App() {
    // Determines the status of the feature flag to assign the user in a feature flag with a feature key of 42.
    // For undetermined cases, users are assigned to false (off status). 

  const { loaded, result } = useLoadableFeature(42)

  return (
    <>
    {
      result ? (
        <SuperAwesomeFeature /> // Logic for on status
      ) : (
        <AwesomeFeature /> // Logic for off status
      )
    }
    </>
  )
}

useFeatureFlagDetail

The useFeatureFlagDetail() Hooks API works the same as useFeature() but additionally provides a reason for the determination of a status for a particular user. This can be useful when you want to check whether the manual allocation is working well or when you think that the traffic allocation you have set is not being reflected in your results.

You must pass a function key as a parameter. For the example code below, we are passing function key 42.

// Status determination details
const decision = useFeatureFlagDetail(42)

// Feature flag on/off results 
const isOn = decision.isOn

// Reason for status determination
const reason = decision.reason

// Status determination details
const { loaded, result } = useLoadableFeatureDetail(42)

// Feature flag on/off results 
const isOn = result.isOn

// Reason for status determination
const reason = result.reason

The reason for the status determination will be in the form of SDK_NOT_READY. Please refer to the table below for the full list of all the different types of reasons.

Feature Flag Parameter

• You can also receive parameter values for state decisions through the useFeatureFlagDetail() Hooks API.
• You can utilize the feature flag parameter settings values received through the config object and getSync() method in the feature flag screen, and if the value is changed in the feature flag parameter setting screen, the changed value will be applied to the code.

📘

Parameter setting is available for SDK version 3.3.0 or later.

// Distribution Decision Detail
const decision = useFeatureFlagDetail(42)

// Get parameter value through getSync() method in distribution decision detail
const parameterValue = decision.getSync("parameterKey", "defaultValue")

// Get the config information with all parameter setting values in the distribution decision detail
const config = decision.config

// Get parameter value from config information
const configParameterValue = config.getSync("parameterKey", "defaultValue")

// Example of string type parameter value
const strValue = decision.getSync("parmeterKey", "defaultValue")
const strValueInConfig = config.getSync("parmeterKey", "defaultValue")

• The parameterKey of the getSync() method is the key information set in the feature flag parameter setting, and the defaultValue is the value returned when the state decision fails or when an incorrect parameter type value is entered.
• To properly receive the set information, it is necessary to enter a value of the same type as the parameter type set for defaultValue.
• JSON type can be received in string form, so for JSON type, defaultValue must be entered as a string type.
• The parameter types provided by the SDK are string, number, boolean and JSON type set in the feature flag screen can be received in the form of a string. The default value of the JSON type must be entered as a string type.