{"id":26223591,"url":"https://github.com/tomchen/clarr","last_synced_at":"2026-04-29T03:31:48.024Z","repository":{"id":281733725,"uuid":"946262135","full_name":"tomchen/clarr","owner":"tomchen","description":"Fastest className construction library","archived":false,"fork":false,"pushed_at":"2025-03-11T21:03:14.000Z","size":10,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-31T21:13:57.383Z","etag":null,"topics":["classnames","javascript","typescript"],"latest_commit_sha":null,"homepage":"","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/tomchen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-03-10T21:40:01.000Z","updated_at":"2025-03-11T21:05:24.000Z","dependencies_parsed_at":"2025-03-10T21:49:47.450Z","dependency_job_id":"0ea31187-4829-41d4-9dc5-6b77dca104d2","html_url":"https://github.com/tomchen/clarr","commit_stats":null,"previous_names":["tomchen/clarr"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/tomchen/clarr","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomchen%2Fclarr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomchen%2Fclarr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomchen%2Fclarr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomchen%2Fclarr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomchen","download_url":"https://codeload.github.com/tomchen/clarr/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomchen%2Fclarr/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32409084,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T02:37:21.628Z","status":"ssl_error","status_checked_at":"2026-04-29T02:36:50.947Z","response_time":110,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["classnames","javascript","typescript"],"created_at":"2025-03-12T17:39:24.120Z","updated_at":"2026-04-29T03:31:48.005Z","avatar_url":"https://github.com/tomchen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# clarr: the fastest utility function for combining class names in JavaScript/TypeScript\n\nCombines multiple class names into a single space-separated string, filtering out falsy values (`false`, `0`, `\"\"`, `null`, `undefined`, `NaN`, `0n`).\n\nLike [`classnames`](https://github.com/JedWatson/classnames) and [`clsx`](https://github.com/lukeed/clsx), but accepts only strings or falsy values as arguments, and faster.\n\nSame function as `clsx/lite` but slightly faster.\n\n## Usage\n\n```\nnpm install clarr\n```\n\n```ts\nimport clarr from \"clarr\"; // or `import { clarr } from \"clarr\"`\n\nclarr(\"class1\", true \u0026\u0026 \"class2\", false \u0026\u0026 \"class3\", null \u0026\u0026 \"class4\");\n// returns \"class1 class2\"\n\n// in react: `\u003cdiv className={clarr(\"class1\", true \u0026\u0026 \"class2\")}\u003e\u003c/div\u003e`\n```\n\nType for each argument: class name string or falsy value (`string | false | 0 | -0 | 0n | \"\" | null | undefined | NaN`)\n\nReturn value: a space-separated string of valid class names\n\n### Formats\n\nES Module, Common JS, simple function in global scope (minified), UMD (minified), and TypeScript definition are available.\n\nUse it directly in HTML:\n\n```html\n\u003cscript src=\"https://unpkg.com/clarr/dist/clarr.global.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nclarr(\u003c...\u003e);\n\u003c/script\u003e\n```\n\nThe minified, non-gzipped global scope version is 133 bytes (it is actually slightly larger when gzipped).\n\n### More examples\n\n```ts\nimport clarr from \"clarr\"; // or `import { clarr } from \"clarr\"`\n\nconst three: number = 3;\nconst nonExistentElement = undefined;\nclarr(\"btn\", three === 6 \u0026\u0026 \"three-is-six\", three === 3 \u0026\u0026 \"three-is-three hello\", \"active\", nonExistentElement \u0026\u0026 \"nonExistentElement-exists\", \"\", null, \"large\", NaN \u0026\u0026 \"nan-class\", 0);\n\n// Returns: \"btn three-is-three hello active large\"\n```\n\nTest files contain more examples if you can read them.\n\n## Performance\n\nI compared several possible implementations/writings (including whether to cache `.length` as a variable, var/let/const, declare variables inside/outside the loop, for/while, the way to check whether it's the first class, the way to concatenate strings, etc.), to ensure the best performance.\n\n## Note\n\nEach argument is of type `string` or any falsy value. Among all falsy values, `NaN` is excluded in the type definition because it is not a valid type, unlike other falsy values such as `0` or `0n`. However, this is not an issue, as the function is intended to be used in expressions like `clarr(NaN \u0026\u0026 'nan-class')`, in such cases, TypeScript infers the type of `NaN \u0026\u0026 'nan-class'` as `0 | \"nan-class\"`, ensuring compatibility.\n\nClass is \"as is\" and will not be trimmed (e.g. `\" my-class  \"`), one or several space/whitespace `\"  \"` will also be kept, duplicates will not be removed.\n\nAs argument, those that would fail TypeScript check (objects like `{a:1}`, non-`0` numbers, etc.) can still run in JavaScript, the result would be the first truthy value (which may not be string), or space-separated string of all truthy values' string forms. The reason not to check it in runtime is that we have TypeScript to check it, no need to check it again in runtime.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomchen%2Fclarr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomchen%2Fclarr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomchen%2Fclarr/lists"}