React Feature Toggles


Version 2

This is version 2, it contains many breaking changes from version 1.

Requirements

React Feature Toggles attempts to satisfy the following requirements:

- Universal - server and client side
- Conditionally render components based on the presence or absence of a specific feature

Install

``
npm install --save @paralleldrive/react-feature-toggles
`

Basic Usage

`js
import { FAQComponent } from '../features/faq';
import { NotFoundComponent } from '../features/404-page';
import { FeatureToggles, Feature } from '@paralleldrive/react-feature-toggles';

const features = ['faq', 'foo', 'bar'];

const MyApp = () => {
return (

name="faq"
inactiveComponent={NotFoundComponent}
activeComponent={FAQComponent}
/>

);
};
`

API

$3

#### FeatureToggles

FeatureToggles is a provider component.

props

- features = []

`js
import { FeatureToggles } from '@paralleldrive/react-feature-toggles';

const features = ['foo', 'bar', 'baz', 'cat'];

const MyApp = () => {
return {...stuff};
};
`

#### Feature

Feature is a consumer component.

If the feature is enabled then the _activeComponent_ will render else it renders the _inactiveComponent_.

Feature takes these props

- name = ""
- inactiveComponent = noop
- activeComponent = null

`js
import { FeatureToggles, Feature } from '@paralleldrive/react-feature-toggles';

const MyApp = () => {
return (

name="faq"
inactiveComponent={NotFoundComponent}
activeComponent={FAQComponent}
/>
name="help"
inactiveComponent={NotFoundComponent}
activeComponent={HelpComponent}
/>

);
};
`

Alternatively, you can use Feature as a render prop component. Do this by passing a function as the children to the Feature component. Note: This will only work if an activeComponent is not provided.

`js
import { FeatureToggles, Feature } from '@paralleldrive/react-feature-toggles';
import { isActiveFeatureName } from '@paralleldrive/feature-toggles';
const MyApp = () => {
return (


{({ features }) =>
isActiveFeatureName('bacon', features)
? 'The bacon feature is active'
: 'Bacon is inactive'
}


);
};
`

$3

#### withFeatureToggles

({ features = [...String] } = {}) => Component => Component

You can use withFeatureToggles to compose your page functionality.

`js
import MyPage from '../feautures/my-page';
import { withFeatureToggles } from '@paralleldrive/react-feature-toggles';

const features = ['foo', 'bar', 'baz', 'cat'];

export default = compose(
withFeatureToggles({ features }),
// ... other page HOC imports
hoc1,
hoc2,
);
`

Depending on your requirements, you might need something slightly different than the default withFeatureToggles. The default withFeatureToggles should serve as a good example to create your own.

#### configureFeature

(inactiveComponent: Component) => (name: String) => (activeComponent: Component) => Component

configureFeature is a higher order component that allows you to configure a Feature component.

configureFeature is autocurried, so you can call it with one or more of its arguments to create a partial application of the function. In the following example, featureOr404() is a partial application of configureFeature():

`js
import { FeatureToggles } from '@paralleldrive/react-feature-toggles';
const NotFoundPage = () =>

const myPage = () => (



);
`

#### withFeatures

If you'd prefer to directly access the list of active Features, you can obtain a features prop with the HoC:

`js
import { withFeatures } from '@paralleldrive/react-feature-toggles';

function MyButton({ title, features }) {
return (
{title}
);
}
export default withFeatures(MyButton);
`

#### useFeatures

If you're using React >= 16.8, you can access the active Features with the useFeatures() hook:

`js
import { useFeatures } from '@paralleldrive/react-feature-toggles';

export default function MyButton({ title }) {
const features = useFeatures();
return (
{title}
);
}
`

Enabling features from the URL

In v2, query logic has been moved out of the provider component. You should now handle this logic before passing features to FeatureToggles

`js
import { FeatureToggles } from '@paralleldrive/react-feature-toggles';
import {
getCurrentActiveFeatureNames
} from '@paralleldrive/feature-toggles';
import parse from 'url-parse';

const url = 'https://domain.com/foo?ft=foo,bar';
const query = parse(url, true);

const initialFeatures = [
{ name: 'foo', isActive: true },
{ name: 'bar', isActive: false },
{ name: 'baz', isActive: false }
];

const features = getCurrentActiveFeatureNames({
initialFeatures,
req: { query }
});

const MyApp = () => {
return {...stuff};
};
``