html-classes
Simple generator string of HTML classes.
Install
npm i html-classes
# or
yarn add html-classesOr 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
