dynamic tags

gistfile1.txt

// Text component
const Text  = ({ tag, fontSize, children}) => {
  // This has to be set as Tag here because JSX wants the tag name to be capitalized, but it renders down to <h1> anyways
  // Default to a <p> tag if no tag is set
  const Tag =  tag ? `${tag}` : 'p';
  return <Tag className={classnames(fontSize ? `f${fontSize}` : null)}>{children}</Tag>
}

export default Text


// Heading component
import React from 'react'
import Text from './Text'

const Heading = ({ tag, children }) => (
  <Text tag={tag}>{children}</Text>
)

export default Heading


// Usage
<Heading tag={'h1'}>
  Heading
</Heading>

//DOM output
<h1>Heading</h1>

Here's an example of how we can dynamically change tags based on props. I personally prefer having the tag set in the props, just because it feels like it keeps the component API more uniform - anything that changes the presentation of a component is passed in via props. Users don't have to remember any exceptions to that rule. But that's basically my only reason for leaning towards this approach so if that doesn't feel like a deal breaker than I think we could go either way with this!