The simplest possible higher-order component in React

withHover.ts

export function withHover<T>(WrappedComponent: React.ComponentType<T & Hoverable>): React.ComponentClass<T> {
  return class extends React.Component<T> {
    state = {
      hover: false,
    };

    onMouseEnter: React.MouseEventHandler = () => {
      this.setState({ hover: true });
    };

    onMouseLeave: React.MouseEventHandler = () => {
      this.setState({ hover: false });
    };

    render() {
      return this.state.hover ? <WrappedComponent onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} {...this.props} /> : 2;
    }
  };
}

interface Hoverable<T = Element> {
  onMouseEnter: React.MouseEventHandler<T>;
  onMouseLeave: React.MouseEventHandler<T>;
}

interface Props extends Hoverable<HTMLDivElement> {}