Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/Hermanya/classnamed-components below:

Hermanya/classnamed-components: 💋Creating React components using your favorite CSS framework just got easier.

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

npm install classnamed-components

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/>
)

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>

classNamed is the default export

• tailwind
• tachyons
• bootstrap

MIT © Hermanya

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4