Hoverable HoC for React components

Hoverable.js

// @flow

import React, { Component } from "react"

type Props = {
  onMouseEnter?: Function | boolean,
  onMouseLeave?: Function | boolean,
}

type State = {
  hovered: boolean,
}

// @todo try a more complex type for ComposedComponent + return type
export default (ComposedComponent: Function) => {
  class Hoverable extends Component<void, Props, State> {
    props: Props;

    state: State = {
      hovered: false,
    };

    handleMouseEnter: Function = (event: SyntheticEvent): void => {
      this.setState({ hovered: true })
      if (typeof this.props.onMouseEnter === "function") {
        this.props.onMouseEnter(event)
      }
    };

    handleMouseLeave: Function = (event: SyntheticEvent): void => {
      this.setState({ hovered: false })
      if (typeof this.props.onMouseLeave === "function") {
        this.props.onMouseLeave(event)
      }
    };

    render(): React$Element<any> {
      return (
        <ComposedComponent
          { ...this.props }
          { ...this.state }
          onMouseEnter={ this.handleMouseEnter }
          onMouseLeave={ this.handleMouseLeave }
        />
      )
    }
  }

  return Hoverable
}

Thanks for this. I had to make some adjustments to the typing to prevent flow errors - https://gist.github.com/Shelob9/87e9f98e5518d61a9405fd3cc746892d