React Feature Toggles attempts to satisfy the following requirements:
- Universal - server and client side
- Conditionally execute code based on the presence or absence of a specific feature
- Toggle features on with url parameters
- Feature Dependency - if a feature depends on a another feature that is disabled, then neither of them should execute
npm install --save @paralleldrive/react-feature-toggles
Setup withFeatures in the page HOC composition
import { withFeatures } from '@paralleldrive/react-feature-toggles';
import initialFeatures from '../config/initial-features';
const pageHOC = compose(
withRedux,
withFeatures({ initialFeatures }),
hoc1,
hoc2
);
Configure the component fallback:
import NotFound from '../components/not-found-component';
import { configureFeature } from '@paralleldrive/react-feature-toggles';
const requiresFeature = configureFeature(NotFound);
export default requiresFeature;
Build your component that requires a specific feature:
import compose from 'lodash/fp/compose';
import requiresFeature from '../hocs/requiresFeature';
import MyComponent from '../components/my-component';
import pageHOC from '../hocs/page';
const MyPage = compose(
pageHOC, // withFeatures should be in there
requiresFeature('feature-name'),
// Optionally, anything special for this page should be here, e.g.,
// requiresRole('admin')
)(MyComponent);
export default MyPage;
Creates an array of enabled features, then sets the features array into React context and passes it onto the wrapped component via props.
// withFeatures() function signature.
const withFeatures = ({
initialFeatures = [],
windowLocationSearch = ""
} = {}) => (WrappedComponent: ReactComponent) => ReactComponent
initialFeatures
interface Feature {
name: String,
enabled: false,
dependencies?: [...featureName: String]
}
const initialFeatures = [ ...Feature]
windowLocationSearch
Should be a string that is equivalent to the browser window.location.search
; this is mostly used for testing purposes.
const windowLocationSearch = '?ft=comments'
Conditionally renders components based on enabled features in the React context.
// configureFeatures() function signature
const configureFeature =
(DefaultFallbackComponent: ReactComponent) =>
(featureName: String) =>
(FeatureComponent: ReactComponent, FallbackComponent = DefaultFallbackComponent) => ReactComponent
Returns all the names of enabled features.
getEnabled(features: [...Feature]) => featureNames: [...String]
Returns the enabled value of a single feature. If the feature does not exist it is considered disabled.
getIsEnabled(features: [...Feature], featureName: String, ) => enabled: Boolean
NOTE: If you are using server rendering then overriding features from the url will cause React to throw a warning that the client-side HTML result is different from the server.
Add comma-separated names to the ft
search param. ?ft=FEATURE_NAME,FEATURE_NAME
example
http://www.domain.com/?ft=help,comments