Interactive React Component

InteractiveComponent.js

/**
 * InteractiveComponent - Easily trigger event handler binding
 * to instance context with a customizable method naming convention
 
 e.g.
 
 class Foo extends InteractiveComponent {
 
  onFooClickedHandler(event){
    console.log('state', this.state)
  }
  
  render() {

    // This handler will already be bound and we don't need 
    // a call to this.onFooClickedHandler.bind in the constructor

    return <button onClick={this.onFooClickedHandler}/>
  }
 }
 */

import React from 'react';

export class InteractiveComponent extends React.Component {
  constructor(props) {
    super(props);
    const prototype = this.__proto__;
    const propNames = Object.getOwnPropertyNames(prototype);
    const hasSpecialPropName = (propName) => {
      const prefix = props.handlerPrefix || 'on';
      const postfix = props.handlerPostfix || 'Handler';
      return propName.length > prefix.length + postfix.length &&
        propName.slice(0, prefix.length) === 'on' &&
        propName.slice(propName.length - postfix.length);
    };

    for (let i = 0; i < propNames.length; i++) {
      const propName = propNames[i];
      if (typeof prototype[propName] === 'function' &&
        hasSpecialPropName(propName)
      ) {
        prototype[propName] = prototype[propName].bind(this);
      }
    }
  }
}