HRT: Hooks, theme, and refs! Consistent re-usable component schema.

hooks-theme-and-refs.js

import React, { Component, PropTypes } from 'react';
import htr from 'hooks-theme-refs';

export class Chip extends Component {
  render() {
    const { label, hooks, theme, refs, children, ...rest } = htr(this);

    return (
      <div {...rest} className={theme.chip} onClick={hooks.onClick} ref={refs.chip}>
        {children}
        {label !== null && (
          <span className={theme.label} ref={refs.label}>{label}</span>
        )}
      </div>
    );
  }
  
  static propTypes = {
    label: PropTypes.string,

    // Event handlers, action dispatch functions, etc.
    hooks: PropTypes.shape({
      onClick: PropTypes.func,
    }),
    
    // ClassNames used by css-modules and others, simple object.
    theme: PropTypes.shape({
      chip: PropTypes.string,
      label: PropTypes.string,
    }),
    
    // Function hooks to get access to public Nodes, avoid findDOMNode.
    refs: PropTypes.shape({
      chip: PropTypes.func,
      label: PropTypes.func,
    }),
  }

  static defaultProps = {
    hooks: {
      onClick: null,
    },

    theme: {
      chip: 'chip',
      label: 'chip-label',
    },

    refs: {
      chip: null,
      label: null,
    },
  }
}

// How-to-use:
function render() {
  return (
    <Chip
      label="Some label"
      hooks={{ onClick: () => console.log('Clicked!') }}
      theme={{ chip: 'my-custom-class' }}
      refs={{ chip: () => console.log(node) }}
    />
  );
}