Using HOC to create React component variants.

variants.tsx

import * as React from 'react';
import { omit } from 'lodash';

export const withVariants = <O extends {}, T extends {}>(
  Component: React.ComponentClass<O> | React.StatelessComponent<O>,
  variants: T
) => {
  type Variants = keyof T;
  interface ExtenralProps {
    variant?: Variants;
  }

  return class extends React.Component<O & ExtenralProps> {
    render() {
      // const { variant, ...passThroughProps } = this.props;
      // Hack: use lodash instead of object rest destructuring operator to avoid problems with types
      const { variant } = this.props;
      const passThroughProps = omit(this.props, ['variant']);
      const variantProps = variants[variant];
      const props = Object.assign({}, variantProps, passThroughProps);

      return <Component {...props} />;
    }
  };
};