Feature Toggling Playbook

BranchByAbstraction.jsx

const MyComponent = ({ toggle, ...props }) => (
  toggle ? <ComponentA {...props} /> : <ComponentB {...props} /> 
);

ComponentOwnsToggle.jsx

import { toggle } from './compileTimeToggles';

const MyComponent = () => (<p>Boom</p>);

export default () => (toggle ? <MyComponent /> : null);

ComponentOwnsToggleWithConnect.jsx

import { connect } from 'react-redux';

const MyComponent = () => (<p>Boom</p>);
const ToggledMyComponent = ({ toggle }) => (toggle ? <MyComponent /> : null);

export default connect((state) => ({ toggle: false })(ToggledMyComponent);

WhenConsumingComponent.jsx

const MyComponent = () => (<p>Boom</p>);

const Consumer = ({ toggle }) => (
  toggled && <MyComponent />
)