Neolithic Prancing Minotaurs

    classnames-minimal

    1.0.1 • Public • Published

    classnames-minimal

    NPM version

    Simple utility function for conditionally joining class names together

    This is inspired by JedWatson’s package classnames which I like but is a bit too bloated for my needs. I rarely need to support non-ES5 environments and I only need a subset of the API, so I created a more minimal version of it.

    Install

    $ npm install --save classnames-minimal
    

    How to use

    Pass it an object literal with class names as keys and a predicaty1 value as value. Only the keys with a truthy value will be part of the generated string.

    import classNames from 'classnames-minimal';
     
    const classes = classNames({
      'block': true,
      'block--disabled': this.props.disabled,
      'block--highlighted': this.props.highlighted
    });
     
    console.log(classes); // => contains 'block block--highlighted' if this.props.highlighted == true and this.props.disabled == false

    1: I think I just made that word up. Predicaty = a value that’s either truthy or falsy.

    Bonus

    If you’re using CSS modules or something similar and you have your class names in an object you can use ES2015’s computed property names really nicely like this…

    import classNames from 'classnames-minimal';
    import styles from './style.css';
     
    const classes = classNames({
      [styles.root]: true,
      [styles.disabled]: this.props.disabled,
      [styles.highlighted]: this.props.highlighted
    });
     
    console.log(classes); // => contains the class names generated by CSS modules and filtered by our predicates

    License

    MIT © Jonathan Svenheden

    Keywords

    none

    Install

    npm i classnames-minimal

    DownloadsWeekly Downloads

    1,705

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    3.67 kB

    Total Files

    4

    Last publish

    Collaborators

    • jonathanp