cssjoiner

Conditionally join CSS classes.

Usage no npm install needed!

<script type="module">
  import cssjoiner from 'https://cdn.skypack.dev/cssjoiner';
</script>

README

cssJoin

Conditionally join CSS classes.

Examples

Simple joining 2 class names.

cssJoin("button", "buttonPrimary");
// "button buttonPrimary"

Usually I'm using class names in an obj.

cssJoin(css.btn, css.primary);
// "button buttonPrimary"

If a class name is actually an array, then the pattern is [test, trueClass, falseClass]

cssJoin(css.btn, [ btnType === "primary", css.primary ])
// "button buttonPrimary" or "button"

cssJoin(css.btn, [ btnType === "primary", css.primary, css.secondary ])
// "button buttonPrimary" or "button buttonSecondary"

An example with Mithril

const component = {
    view : (vnode) =>
        m("div", {
            class : cssJoin(btnCss.btn, [ vnode.state.selected, css.selected ])
        })
};