A React Higher-order Component for sending analytics based on the original post of David Tang for DailyJS

AnalyticsHOC.js

import React from 'react';

export default function(mapPropsToData, WrappedComponent) {
  return function(props) {
    function onClick(event) {
      if (event.target.tagName === 'A') {
        const data = mapPropsToData ? mapPropsToData(props) : {};

        // Process data
      }
    }

    return (
      <div onClick={onClick}>
        <WrappedComponent {...props} />
      </div>
    );
  };
}

CommonComponent.js

import React, { Component } from 'react';
import AnalyticsHOC from './AnalyticsHOC';

class ComponentToWrap extends Component {
  render() {
    //...
  }
}

export default AnalyticsHOC(function(props) {
  return {
    title: props.title,
  };
}, ComponentToWrap);