classed-components

Like styled-components but for classes.

Why

When using CSS Frameworks such as MaterializeCSS it is nice to create components out of existing classes from that framework.

classed-components helps you do that in a convenient way.

Plus, it just comes at 4.26kB and has no dependencies!

How to get started

npm i --save classed-components

import classed from 'classed-components'

const Header = classed.div`
    header 
    green
`

const App = props => {
    return <Header />
}

Features

• Create any HTML tag and associate it with classes.
• Overwrite existing classed componentes with even more classes.
• Conditional classes: Include or exclude classes based on your props.
• Generate classes via interpolation functions also based on your props.

Overwrite existing classed components

import classed from 'classed-components'

const Header = classed.div`
    header 
    green
`
const HeaderBlack = classed(Header)`black col s12`

Conditional classes

You can use include or exclude certain classes based on props or other variables in the current scope. This is a feature you might know from the classnames module. Whenever an embedding/interpolition within the template string returns a boolean it is interpreted as a condition on the preceeding classname.

import classed from 'classed-components'

const large = true

const MyComponent = classed.div`
    header ${props => props.needsHeader} 
    green
    large ${large}
`

Generate classes via interpolation functions

import classed from 'classed-components'
const extra = 'col s12 m6'

const Header = classed.div`
    ${props => props.needsHeader ? 'header' : 'box'} 
    green
    ${extra}
`

className prop

Please note that adding the className prop to a classed component will overwrite its class names.

const Header = classed.div`
    test-class
`

// ...
// Do not do this:
<Header className='will-overwrite-test-class' />