html-classes

Combine html classes

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
html-classes
222.0.22 years ago4 years agoMinified + gzip package size for html-classes in KB

Popular Searches

Readme

html-classes
NPM minzipped size downloads changelog license
Simple generator string of HTML classes.
JavaScript Style Guide
stars watchers

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'

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

A key of an 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'

TypeScript

TypesScript in the box. You can provide a generic variable to define object keys.
classes<'test1' | 'test2'>({ test1: true })

Alternatives

Issues

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