html-classes
Advanced tools
Simple generator string of HTML classes.
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>
Any string value provides as is.
classes('test')
// 'test'
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'
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.
Any function will be called.
classes(() => 'test')
// 'test'
classes(() => ['test1', 'test2'])
// 'test1 test2'
classes(() => ({
test1: () => () => true,
test2: () => () => false,
}))
// 'test1'
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'
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()) // ''
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'
TypesScript in the box. You can provide a generic variable to define object keys.
classes<'test1' | 'test2'>({ test1: true })
If you find a bug, please file an issue on GitHub
FAQs
Combine html classes
We found that html-classes demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
