A pattern for React components that can change their output element

chameleon.js

import React from 'react'

const pass = props => props

export default function chameleon(defaultTag, mapProps = pass) {
  const Component = ({tag: Tag = defaultTag, ...rest}) => <Tag {...mapProps(rest)} />
  Component.as = tag => chameleon(tag, mapProps || pass)
  // if we don't want these to be infinitely as()-able, we could do this instead:
  // Component.as = Tag => ({tag, ...rest}) => <Tag {...mapProps(rest)} />
  return Component
}

const Text = chameleon('span', ({size}) => ({className: `text-${size}`}))
const Para = Text.as('p')
const Blockquote = Para.as('blockquote')

I'm waffling a bit on the terminology. The word "as" seems more, erm, lyrical than "tag"; but "tag" is way more explicit.

const Para = Text.withTag('b')
<Text tag='b' size='small'>hi</Text>

// vs.
const Para = Text.as('p')
<Text as='b' size='small'>hi</Text>