Skip to content

Instantly share code, notes, and snippets.

@tbranyen
Last active June 5, 2017 17:40
Show Gist options
  • Save tbranyen/9045ed16e069409c0919c35bdec1da51 to your computer and use it in GitHub Desktop.
Save tbranyen/9045ed16e069409c0919c35bdec1da51 to your computer and use it in GitHub Desktop.
HRT: Hooks, theme, and refs! Consistent re-usable component schema.
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) }}
/>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment