Simple feature toggle library for React.
npm install react-caterpillarA simple [feature toggle][feature-toggles] library for React ⚛️.
``bash`
yarn add react-caterpillar
or
`bash`
npm install react-caterpillar
`typescript
// feature-toggles.ts
import {initCaterpillar} from 'caterpillar';
import type {FeatureGroup} from 'caterpillar';
export enum FeatureName {
blueButton = 'blueButton',
displayVersion = 'displayVersion',
}
const FEATURES: FeatureGroup
[FeatureName.blueButton]: {
name: FeatureName.blueButton,
description: 'Blue button',
active: true,
},
[FeatureName.displayVersion]: {
name: FeatureName.displayVersion,
description: 'Display app version on Home screen',
active: false,
},
};
const Caterpillar = initCaterpillar(FEATURES);
export default Caterpillar;
`
`typescript
// app.tsx
import React from 'react';
import Caterpillar, {FeatureName} from './feature-toggles';
function HomeScreen() {
const displayVersion = Caterpillar.useFeature(FeatureName.displayVersion);
return (
function App() {
return (
);
}
`
This section explains the rest of the API.
You can access feature toggles using either the React Hooks API or the higher order Caterpillar.Feature component.
`typescript
import Caterpillar, {FeatureName} from './feature-toggles';
function AboutScreen() {
const [count, setCount] = React.useState(0);
return (
onClick={() => setCount(count => count + 1)}
>
Count is: {count}
);
}
`
You can use the Caterpillar.useFeatures-hook to access all feature toggles. This is especially useful for implementing a (hidden) feature toggle screen where users can enable features to preview them locally.
`typescript
import Caterpillar from './feature-toggles';
function HiddenScreen() {
const [features, setFeature] = Caterpillar.useFeatures();
return (
$3
You can pass a list of initially enabled features to the provider component. One idea would be to read the enabled features from the URL.
typescript
import React from 'react';
import parse from 'url-parse';
import Caterpillar, {FeatureName} from './feature-toggles';function App() {
const features = React.useMemo(() => {
const url = parse(window.location.href, true);
return url.query['enable']
}, [])
return (
);
}
``[feature-toggles]: https://martinfowler.com/articles/feature-toggles.html