React Feature Flags is a library that allows you to easily add feature flags to your React application using ttoss ecosystem.
pnpm add @ttoss/react-feature-flags
Initialize the library by wrapping your application with FeatureFlagsProvider
and passing loadFeatures
function as a prop (loadFeatures
is not required). loadFeatures
function should return a promise that resolves to an object with feature flags.
import {
FeatureFlagsProvider,
useFeatureFlag,
} from '@ttoss/react-feature-flags';
/**
* Load features from your backend or any other source.
*/
const loadFeatures = async () => {
const response = await fetch('https://...');
const { features } = await response.json();
return features; // features is string[]
};
const App = () => {
return (
<FeatureFlagsProvider loadFeatures={loadFeatures}>
<MyComponent />
</FeatureFlagsProvider>
);
};
Use useFeatureFlag
hook to get a feature flag value.
import { useFeatureFlag } from '@ttoss/react-feature-flags';
const MyComponent = () => {
const isFeatureEnabled = useFeatureFlag('my-feature');
return <div>{isFeatureEnabled ? 'Enabled' : 'Disabled'}</div>;
};
You can use useFeatureFlag
hook to get a feature flag value. It returns true
if the feature flag is enabled, false
otherwise.
import { useFeatureFlag } from '@ttoss/react-feature-flags';
const MyComponent = () => {
const isFeatureEnabled = useFeatureFlag('my-feature');
return <div>{isFeatureEnabled ? 'Enabled' : 'Disabled'}</div>;
};
You can use FeatureFlag
component to render its children only if the feature flag is enabled. It has a fallback
(optional) prop that can be used to render something else if the feature flag is disabled.
import { FeatureFlag } from '@ttoss/react-feature-flags';
const MyComponent = () => {
return (
<FeatureFlag name="my-feature" fallback={<div>Feature is disabled</div>}>
<div>Feature is enabled</div>
</FeatureFlag>
);
};
You can update feature flags by calling updateFeatures
function that is returned from useFeatureFlags
hook. This is useful when you want to update feature flags after providers are initialized.
import { useFeatureFlags } from '@ttoss/react-feature-flags';
const MyComponent = () => {
const { updateFeatures } = useFeatureFlags();
const handleClick = async () => {
const response = await fetch('https://...');
const { features } = await response.json();
updateFeatures(features);
};
return <button onClick={handleClick}>Update features</button>;
};
If you are using TypeScript, you can define your feature flags names on feature-flags.d.ts
file.
import '@ttoss/react-feature-flags';
declare module '@ttoss/react-feature-flags' {
export type FeatureFlags = 'my-feature' | 'my-other-feature';
}
This will allow you to use useFeatureFlag
hook with type safety.
import { useFeatureFlag } from '@ttoss/react-feature-flags';
const MyComponent = () => {
const isFeatureEnabled = useFeatureFlag('my-feature');
return <div>{isFeatureEnabled ? 'Enabled' : 'Disabled'}</div>;
};