React Heading Components

_headings.jsx

const headingsArray = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];

const headingsStyles = {
	base: {
		textRendering: "optimizeLegibility",
		lineHeight: 1,
		marginTop: 0,
		color: "#222",
		fontFamily: Fonts.serif,
	},
	h1: {
		fontSize: "4rem",
		marginBottom: (4/LineHeight) + 'rem'
	},
	h2: {
		fontSize: "3.333rem",
		marginBottom: (3.333/LineHeight) + 'rem'
	},
	h3: {
		fontSize: "2.6667rem",
		marginBottom: (2.6667/LineHeight) + 'rem'
	},
	h4: {
		fontSize: "2rem",
		marginBottom: (2/LineHeight) + 'rem'
	},
	h5: {
		fontSize: "1.333rem",
		marginBottom: (1.333/LineHeight) + 'rem'
	}
}

Headings = {}

_.each(headingsArray, function(heading, index){
	Headings[heading] = React.createClass(Radium.wrap({
		render: function(){

			var styles = {
				base: headingsStyles.base
			}

			var Heading = heading;

			return (
				<Heading className={this.props.className}
					style={[
						headingsStyles[heading],
						styles.base,
						styles.base.color = this.props.color,
						styles.base.fontWeight = this.props.weight,
						styles.base.opacity = this.props.alpha,
						styles.base.textAlign = this.props.align
					]}
				>
					{this.props.children}
				</Heading>
			)
		}
	}));
});