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

importclassedfrom'classed-components'constHeader=classed.div` header  green`constApp=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

importclassedfrom'classed-components'constHeader=classed.div` header  green`constHeaderBlack=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.

importclassedfrom'classed-components'constlarge=trueconstMyComponent=classed.div` header ${props=>props.needsHeader} green large ${large}`

Generate classes via interpolation functions

importclassedfrom'classed-components'constextra='col s12 m6'constHeader=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.

constHeader=classed.div` test-class`// ...// Do not do this:<HeaderclassName='will-overwrite-test-class'/>