README

html-classes

Simple converter from any type to string of HTML classes.

Install

npm i html-classes
# or
yarn add html-classes

Or you can use minified file.

<!doctype html>
<html>
  <head>
    <script src="https://unpkg.com/html-classes/classes.min.js"></script>
  </head>
  <body>
    <script>
      console.log(classes('test'))
    </script>
  </body>
</html>

Usage

String

Any string value provides as is.

classes('test')
// 'test'

classes('test1', 'test2')
// 'test1 test2'

Array

Any array spreads like the flat method of an array.

classes(['test'])
// 'test'

classes(['test1', 'test2'])
// 'test1 test2'

classes(
  [
    'test1',
    ['test2'],
  ],
  'test3',
)
// 'test1 test2 test3'

Object

The key of the object will be used as a class when the value equals true.

classes({
  test: true,
})
// 'test'

classes({
  test1: true,
  test2: 1,
  test3: NaN,
})
// 'test1 test2'

classes({
  test1: () => true,
  test2: () => false,
})
// 'test1'

The last example works that 'cause of the next definition.

Function

Any function will be called.

classes(() => 'test')
// 'test'

classes(() => ['test1', 'test2'])
// 'test1 test2'

classes(() => ({
  test1: () => () => true,
  test2: () => () => false,
}))
// 'test1'

Class

Any instance of class will be handled the same as an object.

class Custom {
  test1 () {
    return true
  }

  test2 () {
    return false
  }

  get test3 () {
    return true
  }

  field = true
}

classes(new Custom())
// 'field'

Other

Any other type will be ignored.

classes() // ''
classes(undefined) // ''
classes(null) // ''
classes(false) // ''
classes(true) // ''
classes(0) // ''
classes(-1) // ''
classes(1) // ''
classes(NaN) // ''
classes(Symbol()) // ''

ES6

For the ES6 version, you can use iterable functionality.
If the type can be iterable then html-classes goes through values.

classes(new Set(['test1', 'test2']))
// 'test1 test2'

classes(new Map([
  ['test1', false],
  ['', 'test2'],
  [undefined, null],
]))
// 'test1 test2'

class Test {
  * [Symbol.iterator] () {
    let i = 0

    while (i++ < 3) {
      yield `test${i}`
    }
  }
}

classes(new Test())
// 'test1 test2 test3'

Alternatives

Issues

If you find a bug, please file an issue on GitHub

Usage no npm install needed!