{"id":23366730,"url":"https://github.com/d8corp/html-classes","last_synced_at":"2025-08-18T20:34:42.046Z","repository":{"id":46900811,"uuid":"255031803","full_name":"d8corp/html-classes","owner":"d8corp","description":"Combine html classes","archived":false,"fork":false,"pushed_at":"2023-01-09T02:21:04.000Z","size":374,"stargazers_count":2,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T06:16:39.336Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/d8corp.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-12T07:33:42.000Z","updated_at":"2024-05-19T09:37:41.000Z","dependencies_parsed_at":"2023-02-08T08:16:01.890Z","dependency_job_id":null,"html_url":"https://github.com/d8corp/html-classes","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d8corp%2Fhtml-classes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d8corp%2Fhtml-classes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d8corp%2Fhtml-classes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d8corp%2Fhtml-classes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/d8corp","download_url":"https://codeload.github.com/d8corp/html-classes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247744329,"owners_count":20988783,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-21T14:17:27.977Z","updated_at":"2025-04-07T23:16:04.177Z","avatar_url":"https://github.com/d8corp.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# html-classes\n\n[![NPM](https://img.shields.io/npm/v/html-classes.svg)](https://www.npmjs.com/package/html-classes)\n[![minzipped size](https://img.shields.io/bundlephobia/minzip/html-classes)](https://bundlephobia.com/package/html-classes)\n[![downloads](https://img.shields.io/npm/dm/html-classes.svg)](https://www.npmtrends.com/html-classes)\n[![changelog](https://img.shields.io/badge/Changelog-⋮-brightgreen)](https://changelogs.xyz/html-classes)\n[![license](https://img.shields.io/npm/l/html-classes)](https://github.com/d8corp/html-classes/blob/master/LICENSE)\n\nSimple generator `string` of **HTML classes**.\n\n[![JavaScript Style Guide](https://cdn.rawgit.com/standard/standard/master/badge.svg)](https://github.com/standard/standard)\n\n[![stars](https://img.shields.io/github/stars/d8corp/html-classes?style=social)](https://github.com/d8corp/html-classes)\n[![watchers](https://img.shields.io/github/watchers/d8corp/html-classes?style=social)](https://github.com/d8corp/html-classes)\n\n## Install\n\n```bash\nnpm i html-classes\n# or\nyarn add html-classes\n```\n\nOr you can use [minified file](https://github.com/d8corp/html-classes/blob/master/lib/classes.min.js).\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript src=\"https://unpkg.com/html-classes/classes.min.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cscript\u003e\n      console.log(classes('test'))\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Usage\n\n### String\n\nAny string value provides as is.\n```javascript\nclasses('test')\n// 'test'\n```\n\n### Array\n\nAny array spreads like the `flat` method of an array.\n```javascript\nclasses(['test'])\n// 'test'\n\nclasses(['test1', 'test2'])\n// 'test1 test2'\n\nclasses([\n  'test1',\n  ['test2'],\n  'test3',\n])\n// 'test1 test2 test3'\n```\n\n### Object\n\nA key of an object will be used as a class when the value equals true.\n```javascript\nclasses({\n  test: true,\n})\n// 'test'\n\nclasses({\n  test1: true,\n  test2: 1,\n  test3: NaN,\n})\n// 'test1 test2'\n\nclasses({\n  test1: () =\u003e true,\n  test2: () =\u003e false,\n})\n// 'test1'\n```\n\n\u003e The last example works that 'cause of the next definition.\n\n### Function\n\nAny function will be called.\n```javascript\nclasses(() =\u003e 'test')\n// 'test'\n\nclasses(() =\u003e ['test1', 'test2'])\n// 'test1 test2'\n\nclasses(() =\u003e ({\n  test1: () =\u003e () =\u003e true,\n  test2: () =\u003e () =\u003e false,\n}))\n// 'test1'\n```\n\n### Class\n\nAny instance of class will be handled the same as an object.\n```javascript\nclass Custom {\n  test1 () {\n    return true\n  }\n\n  test2 () {\n    return false\n  }\n\n  get test3 () {\n    return true\n  }\n\n  field = true\n}\n\nclasses(new Custom())\n// 'field'\n```\n\n### Other\n\nAny other type will be ignored.\n```javascript\nclasses() // ''\nclasses(undefined) // ''\nclasses(null) // ''\nclasses(false) // ''\nclasses(true) // ''\nclasses(0) // ''\nclasses(-1) // ''\nclasses(1) // ''\nclasses(NaN) // ''\nclasses(Symbol()) // ''\n```\n\n## ES6\n\nFor the [ES6](https://github.com/d8corp/html-classes/blob/master/lib/es6.js) version, you can use iterable functionality.   \nIf the type can be iterable then `html-classes` goes through values.\n```javascript\nclasses(new Set(['test1', 'test2']))\n// 'test1 test2'\n\nclasses(new Map([\n  ['test1', false],\n  ['', 'test2'],\n  [undefined, null],\n]))\n// 'test1 test2'\n\nclass Test {\n  * [Symbol.iterator] () {\n    let i = 0\n\n    while (i++ \u003c 3) {\n      yield `test${i}`\n    }\n  }\n}\n\nclasses(new Test())\n// 'test1 test2 test3'\n```\n\n## TypeScript\nTypesScript in the box.\nYou can provide a generic variable to define object keys.\n\n```typescript\nclasses\u003c'test1' | 'test2'\u003e({ test1: true })\n```\n\n## Alternatives\n\n- [classnames](https://www.npmjs.com/package/classnames)\n- [merge-class-names](https://www.npmjs.com/package/merge-class-names)\n\n## Issues\n\nIf you find a bug, please file an issue on [GitHub](https://github.com/d8corp/html-classes/issues)\n\n[![issues](https://img.shields.io/github/issues-raw/d8corp/html-classes)](https://github.com/d8corp/html-classes/issues)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd8corp%2Fhtml-classes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fd8corp%2Fhtml-classes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd8corp%2Fhtml-classes/lists"}