Classnamer

The ES6 utility for formatting css classnames written in TypeScript (inspired by classnames). Compatible with TypeScript 1.6+ commonjs module resolution.

Install with npm:

npm install classnamer

Using with node.js (TypeScript ES6 syntax):

import classnamer from "classnamer";

//import classnamer and types
import classnamer, {
    ClassNameObject,
    ClassNamePrimitive,
    ClassNameFragment,
    ClassNameFragmentList } from "classnamer";

Usage

The classnamer function takes any number of ClassNameFragment arguments and produces the string result.

The ClassNameFragment type is a union of ClassNamePrimitive, ClassNameObject and ClassNameFragmentList.

The ClassNamePrimitive type can be string, number or boolean.

The ClassNameObject is a map with boolean values which indicate should keys be included in the output or not.

The ClassNameFragmentList type represents a list of ClassNameFragment objects.

classnamer("super", "man"); // => "super man"
classnamer("super", { man : true }); // => "super man"
classnamer({ super: true }, { man : true }); // => "super man"

// lots of arguments of various types
classnamer("super", { man: true, krypton: false }, "zor", { el: true }); // => "super man zor el"

// other falsy values are just ignored
classnamer(null, false, "super", undefined, 0, 1, { man: null }, ""); // => "super 1"

ClassNameFragmentList will be recursively flattened as per the rules above:

let fragments: ClassNameFragmentList = ["man", { kripton: true, phantom: false }];
classnamer("super", fragments); // => "super man kripton"

License

MIT