Feature Flags

React Feature Flagging Library
This is a high-level feature flagging library for our React apps.
Feature flagging is a way to soft launch a "beta ready" feature to a specific group of users.
Feature flagging is not a way to hide a feature from the users that is still a work in progress.
Usage
Application entrypoint
1
import { FeatureFlagProvider } from '@island.is/feature-flags'
Copied!
then wrap your application using
1
return (
2
  <FeatureFlagProvider sdkKey={environment.featureFlagSdkKey}>
3
    <App />
4
  </FeatureFlagProvider>
5
)
Copied!
If the FeatureFlagProvider is nested inside Authenticator, it will derive a default user object from that authentication.
Alternatively, you can pass in a defaultUser property to FeatureFlagProvider.
Feature flag consumer
1
import { useFeatureFlagClient } from '@island.is/react/feature-flags'
2
​
3
render() {
4
  const featureFlagClient = useFeatureFlagClient()
5
  const [showAwesome, setShowAwesome] = useState(false)
6
​
7
  useEffect(() => {
8
    const getData = async () => {
9
      const featureEnabled = await featureFlagClient.getValue(
10
        'isAwesomeFeatureEnabled',
11
        false,
12
      )
13
​
14
      setShowAwesome(featureEnabled as boolean)
15
    }
16
​
17
    getData()
18
  }, [])
19
​
20
  return `You are ${showAwesome ? 'awesome' : 'not really that awesome'}.`
21
}
Copied!
For the common use case of checking on a feature flag, there is useFeatureFlag hook:
1
import { useFeatureFlag } from '@island.is/react/feature-flags'
2
​
3
const MyComponent = () => {
4
  const { value: showAwesome, loading } = useFeatureFlag(
5
    'isAwesomeFeatureEnabled',
6
    false,
7
  )
8
​
9
  return `You are ${showAwesome ? 'awesome' : 'not really that awesome'}.`
10
}
Copied!
While loading feature flags (loading === true), the value is set to the defaultValue argument.
The third argument (user) of getValue is optional and defaults to the defaultUser prop in FeatureFlagProvider or the authenticated user from Authenticator.
Running unit tests
Run nx test react-feature-flags to execute the unit tests via Jest.

Libs - Previous

React Libraries

Next - Libs

Regulations

Last modified 5mo ago

Copy link

Contents

React Feature Flagging Library

Usage

Running unit tests