Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Typography React Component -- React header component with margin prop corrected for line-height
/* $margin-large: 28px === desired margin from baseline. */
/* $margin-medium: 16px === desired margin from baseline. */
/* $margin-small: 8px === desired margin from baseline. */
.base {
/* line-height adds 16px(!) to bottom of heading */
line-height: 1.5;
font-size: 40px;
}
.marginlarge {
margin-bottom: 12px;
}
.marginmedium {
margin-bottom: 0;
}
.marginsmall {
margin-bottom: -8px;
}
.themesaphire {
color: blue;
}
.themeruby {
color: red;
}
'use strict';
import {Component} from 'react';
import style from './Header1.css';
import classNames from 'classnames';
class Header1 extends Component {
render() {
const base = style.base;
const margin = style['margin' + this.props.margin] || '';
const theme = style['theme' + this.props.theme];
return (
React.createElement(this.props.tagName, {
...this.props,
className: classNames(
base,
margin,
theme,
this.props.className
)
}, this.props.children)
);
}
}
Header1.defaultProps = {
tagName: 'h2', // SEO only. H2 is prob most common?
margin: '',
theme: 'saphire'
};
Header1.propTypes = {
tagName: React.PropTypes.string.isRequired,
margin: React.PropTypes.oneOf(['', 'small', 'medium', 'large']).isRequired,
theme: React.PropTypes.oneOf(['saphire', 'ruby']).isRequired
};
export default Header1;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.