classnamed-components

Do you ever wish there was something like styled-components but for @tachyons_css, @tailwindcss and other #functionalCSS frameworks? There is now!

Website with examples

Install

npm install classnamed-components

Usage

import * as React from 'react'
import classNamed from 'classnamed-components'

const MySection = classNamed("section")`px-6 py-4 bg-white`;
// INSTEAD OF
// const MySection = ({className, ...props}) => {
//   return <section
//     className={`px-6 py-4 bg-white ${className}`}
//     {...props}
//   />
// }

// You can use props to have dynamic class names
const MyButton = classNamed('button')`
  btn shadow
  ${props => ({
    big: 'btn-lg',
    small: 'btn-sm',
  }[props.size])}
`

const MyExample = (props) => (
  <MySection/>
    <MyButton size="big" />
    <MyButton size="small" className="ml-2" />
  <MySection/>
)

Typescript

type myButtonProps = {
  size?: 'big' | 'small'
}
const MyButton = classnamed('button')`
  btn shadow
  ${(props: myButtonProps) => ({
    big: 'btn-lg',
    small: 'btn-sm',
  }[props.size || ''] || '')}
` as React.SFC<myButtonProps>

API

classNamed is the default export

prop	type	default	description
as	React.Component or string	none	replacement base component

Examples

• tailwind
• tachyons
• bootstrap

License

MIT © Hermanya