@umbrellio/prefix-classnames

@umbrellio/prefix-classnames

This library allows adding prefixes to classes attributes of html elements.

Install

$ yarn add @umbrellio/prefix-classnames

Usage

Imported from the library function takes one argument which will be the prefix for classes. Returns function which takes any number of arguments which can be a string, an object or an array and returns the string with the prefix.

classnames(prefix: String): (...args: String | Object | Array): String => result

import classnames from "@umbrellio/prefix-classnames"

classnames(prefix: String): (...args: String | Object | Array): String => result

const cn = classnames("prefix__")

// string arguments
cn("foo", "bar") // => "prefix__foo prefix__bar"
cn("foo", { bar: true }) // => "prefix__foo prefix__bar"

// object arguments
cn({ "foo-bar": true }) // => "prefix__foo-bar"
cn({ "foo-bar": false }) // => ""
cn({ foo: true }, { bar: true }) // => "prefix__foo prefix__bar"
cn({ foo: true, bar: true }) // => "prefix__foo prefix__bar"

// array argument
cn(["cat", { foo: true, bar: false }, "duck"]) // => "prefix__cat prefix__foo prefix__duck"

// lots of arguments of various types
cn("foo", { bar: true, duck: false }, "baz", { quux: true }); // => "prefix__foo prefix__bar prefix__baz prefix__quux"

// other and falsy types of arguments are just ignored
cn(null, false, "bar", undefined, 0, 123, { baz: null }, ""); // => "prefix__bar"

Usage with React component

import classnames from "@umbrellio/prefix-classnames"

const cn = classnames("super-prefix__");

class Button extends React.Component {
  // ...
  render () {
    const btnClass = cn({
      btn: true,
      "btn-pressed": this.state.isPressed,
      "btn-over": !this.state.isPressed && this.state.isHovered
    });
    return <button className={btnClass}>{this.props.label}</button>;
  }
}