Learn React Now
  • Table of Content
  • Design Patterns and Techniques
    • Conditional in JSX
    • Async Nature Of setState()
    • Dependency Injection
    • Context Wrapper
    • Event Handlers
    • Flux Pattern
    • One Way Data Flow
    • Presentational vs Container
    • Third Party Integration
    • Passing Function To setState()
    • Decorators
    • Feature Flags
    • Component Switch
    • Reaching Into A Component
    • List Components
    • Format Text via Component
    • Share Tracking Logic
  • Anti-patterns
    • Introduction
    • Props In Initial State
    • findDOMNode()
    • Mixins
    • setState() in componentWillMount()
    • Mutating State
    • Using Indexes as Key
    • Spreading Props on DOM elements
  • Coding Styles
  • Handling UX Variations
    • Introduction
    • Composing UX Variations
    • Toggle UI Elements
    • HOC for Feature Toggles
    • HOC props proxy
    • Wrapper Components
    • Display Order Variations
  • Performance Tips
    • Introduction
    • shouldComponentUpdate() check
    • Using Pure Components
    • Using reselect
  • Styling
    • Introduction
    • Stateless UI Components
    • Styles Module
    • Style Functions
    • npm Modules
    • Base Component
    • Layout Component
    • Typography Component
    • HOC for Styling
  • Gotchas
    • Introduction
    • Pure render checks
    • Synthetic Events
    • Related Links
Powered by GitBook
On this page

Was this helpful?

  1. Handling UX Variations

HOC for Feature Toggles

Using Higher order components (HOC) for UX variations

eg. Toggling features On/Off

// featureToggle.js
const isFeatureOn = function (featureName) {
  // return true or false
};

import { isFeatureOn } from './featureToggle';

const toggleOn = (featureName, ComposedComponent) => class HOC extends Component {
  render() {
    return isFeatureOn(featureName) ? <ComposedComponent {...this.props} /> : null;
  }
};

// Usage
import AdsComponent from './Ads'
const Ads = toggleOn('ads', AdsComponent);
PreviousToggle UI ElementsNextHOC props proxy

Last updated 4 years ago

Was this helpful?