Skip to content

Instantly share code, notes, and snippets.

@granmoe

granmoe/classnames.js

Last active May 9, 2017 01:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save granmoe/f1a765d9f83c837fa593d043a3dddfc1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save granmoe/f1a765d9f83c837fa593d043a3dddfc1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. granmoe revised this gist May 9, 2017. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions classnames.js
    View file
    Original file line number Diff line number Diff line change
    @@ -11,12 +11,12 @@ export default function () {
    options = arguments[0]
    }

    Object.keys(options).forEach(keyName => {
    if (options[keyName]) {
    if (['-', '_'].includes(keyName[0])) {
    classNames.push(className + keyName)
    Object.entries(options).forEach(([key, value]) => {
    if (value) {
    if (['-', '_'].includes(key[0])) {
    classNames.push(className + key)
    } else {
    classNames.push(keyName)
    classNames.push(key)
    }
    }
    })
  2. granmoe created this gist Dec 25, 2016.
    38 changes: 38 additions & 0 deletions classnames.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@
    export default function () {
    let className = ''
    let options = {}
    const classNames = []

    if (arguments.length > 1) {
    className = arguments[0]
    options = arguments[1]
    classNames.push(className)
    } else {
    options = arguments[0]
    }

    Object.keys(options).forEach(keyName => {
    if (options[keyName]) {
    if (['-', '_'].includes(keyName[0])) {
    classNames.push(className + keyName)
    } else {
    classNames.push(keyName)
    }
    }
    })

    return classNames.join(' ')
    }

    /* examples:
    classnames('foo', { 'bar': returnsTrue(), 'baz': someFalseyValue, 'qux': (() => 1)() })
    === 'foo bar qux'
    classnames('foo__bar', { '--baz': returnsTrue(), '--quz': someFalseyValue })
    === 'foo__bar foo__bar--baz'
    classnames({ 'foo--bar': true, 'foo--baz': someFalseyValue })
    === 'foo--bar'
    */