react-auto-subcomponent

create react components on-the-fly by simply accessing them!

usage

the api is generally as follows:

import { auto } from 'react-auto-subcomponent'
auto(
  ComponentClassToAttachDynamicComponentsTo,
  DynamicComponentClass,
  { // opts, defaults shown
    alphaMode: false // only permit dynamic components name A thru Z
  }
)

// Thing.jsx
import { auto } from 'react-auto-subcomponent'
class Thing extends React.PureComponent {
  render () {
    return <div className='thing'>{...this.props.children}</div>
  }
}
export default auto(
  Thing,
  props => (
    <div className='thing-auto'>
      {props.children}
    </div>
  )
)

// now use it!
// App.js
import Thing from './Thing'
export default function App () {
  return (
    <Thing>
      <Thing.X>I never specified a `.X` component!</Thing.X>
      <Thing.Y>But it component renders using the 2nd arg to auto!</Thing.Y>
      <Thing.Z>This is useful for creating layout variants using</Thing.Z>
      <Thing.Q>similarly named components</Thing.Q>
    </Thing>
  )
}