Classable react classes

README.md

Was kinda bored and was wondering what HAML link react components would look like

Use this if you want if you make it into a npm package please credit me :D

classable.js

import React from 'react'
const newGetter = getFunc => new Proxy({}, { get: getFunc })

const classable = Tag => {
  return newGetter((_, className) => {
    let taggedFn = props => <Tag className={className} {...props} />
    taggedFn.displayName = `Classable(${Tag.displayName || Tag})`
    return taggedFn
  })
}

module.exports = newGetter((_, Tag) => {
  if (Tag === 'default' || Tag === 'classable') return classable
  else return classable(Tag)
})

example.js

import React from 'react'
import classable, { div, h2 } from './classable'
import { Link as _Link } from 'react-router-dom'

const Link = classable(_Link)
const Link2 = Link['link-two']
export default props => (
  <div.container>
    <h2.title>{props.title}</h2.title>
    <Link.linkOne>page one</Link.linkOne>
    <Link2>page two</Link2>
  </div.container>
)

// rendered html => 
// <div class="container">
//   <h2 class="title">Title</h2>
//   <a class="linkOne">
//     page one
//   </a>
//   <a class="link-two">
//     page one
//   </a>
// </div>