https://github.com/d8corp/html-classes
Combine html classes
https://github.com/d8corp/html-classes
Last synced: 11 months ago
JSON representation
Combine html classes
- Host: GitHub
- URL: https://github.com/d8corp/html-classes
- Owner: d8corp
- License: mit
- Created: 2020-04-12T07:33:42.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-09T02:21:04.000Z (over 3 years ago)
- Last Synced: 2025-03-18T06:16:39.336Z (over 1 year ago)
- Language: JavaScript
- Size: 365 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# html-classes
[](https://www.npmjs.com/package/html-classes)
[](https://bundlephobia.com/package/html-classes)
[](https://www.npmtrends.com/html-classes)
[](https://changelogs.xyz/html-classes)
[](https://github.com/d8corp/html-classes/blob/master/LICENSE)
Simple generator `string` of **HTML classes**.
[](https://github.com/standard/standard)
[](https://github.com/d8corp/html-classes)
[](https://github.com/d8corp/html-classes)
## Install
```bash
npm i html-classes
# or
yarn add html-classes
```
Or you can use [minified file](https://github.com/d8corp/html-classes/blob/master/lib/classes.min.js).
```html
console.log(classes('test'))
```
## Usage
### String
Any string value provides as is.
```javascript
classes('test')
// 'test'
```
### Array
Any array spreads like the `flat` method of an array.
```javascript
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.
```javascript
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.
```javascript
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.
```javascript
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.
```javascript
classes() // ''
classes(undefined) // ''
classes(null) // ''
classes(false) // ''
classes(true) // ''
classes(0) // ''
classes(-1) // ''
classes(1) // ''
classes(NaN) // ''
classes(Symbol()) // ''
```
## ES6
For the [ES6](https://github.com/d8corp/html-classes/blob/master/lib/es6.js) version, you can use iterable functionality.
If the type can be iterable then `html-classes` goes through values.
```javascript
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.
```typescript
classes<'test1' | 'test2'>({ test1: true })
```
## Alternatives
- [classnames](https://www.npmjs.com/package/classnames)
- [merge-class-names](https://www.npmjs.com/package/merge-class-names)
## Issues
If you find a bug, please file an issue on [GitHub](https://github.com/d8corp/html-classes/issues)
[](https://github.com/d8corp/html-classes/issues)