{"id":21995968,"url":"https://github.com/andria-dev/classnames","last_synced_at":"2026-04-09T12:02:27.116Z","repository":{"id":57101340,"uuid":"163534290","full_name":"andria-dev/classnames","owner":"andria-dev","description":"A fast and tiny JavaScript utility for joining classNames together","archived":false,"fork":false,"pushed_at":"2020-02-04T12:41:42.000Z","size":192,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T21:12:07.178Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://npm.im/@chbphone55/classnames","language":"TypeScript","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/andria-dev.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}},"created_at":"2018-12-29T19:00:14.000Z","updated_at":"2020-12-09T04:03:57.000Z","dependencies_parsed_at":"2022-08-20T21:10:58.747Z","dependency_job_id":null,"html_url":"https://github.com/andria-dev/classnames","commit_stats":null,"previous_names":["chrisbrownie55/classnames"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andria-dev%2Fclassnames","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andria-dev%2Fclassnames/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andria-dev%2Fclassnames/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andria-dev%2Fclassnames/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andria-dev","download_url":"https://codeload.github.com/andria-dev/classnames/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245053791,"owners_count":20553393,"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-11-29T21:19:28.097Z","updated_at":"2025-10-26T14:39:33.068Z","avatar_url":"https://github.com/andria-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# classnames\n\n\u003cimg alt=\"Dependency Status\" src=\"https://david-dm.org/ChrisBrownie55/classnames.svg\" /\u003e\n\u003cimg src=\"https://api.codeclimate.com/v1/badges/8879bdee9b5f03fe7119/maintainability\" alt=\"Maintainability Rating\" /\u003e\n\u003cimg src=\"https://snyk.io/test/github/ChrisBrownie55/classnames/badge.svg?targetFile=package.json\" alt=\"Known Vulnerabilities\" /\u003e\n\u003cimg src=\"https://badge.fury.io/js/%40chbphone55%2Fclassnames.svg\" alt=\"npm version\" /\u003e\n\u003cimg src=\"https://img.shields.io/npm/dw/@chbphone55/classnames.svg\" alt=\"downloads\" /\u003e\n\nA simple and small JavaScript utility for joining class names together. Made for use with frameworks like React, but can be used how you see fit.\n\n## **Installation:**\n```bash\nnpm i @chbphone55/classnames\n# or\nyarn add @chbphone55/classnames\n```\n\n## **Usage:**\n\n### First let's import it\n```js\n// Node\nconst { classNames } = require('@chbphone55/classnames');\n\n// ESM\nimport { classNames } from '@chbphone55/classnames';\n```\n\n### Now let's use it\n```js\n/* STRINGS */\nclassNames('loading-indicator', 'red-bg');\n// =\u003e 'loading-indicator red-bg'\n\n/* OBJECTS, falsey values cause extra spaces */\nclassNames({ animated: 'truthy value', 'inactive-bg': false });\n// =\u003e 'animated '\n\n/* OBJECTS \u0026 STRINGS */\nclassNames('loading-indicator', { animated: true });\n// =\u003e 'loading-indicator animated'\n\n/* ARRAYS (recursively flattened) */\nclassNames(['activated', { nested: true }]);\n// =\u003e 'activated nested'\n\n/*\n  All other types will be ignored but will cause extra spaces\n  if they are either, falsey object (null) or not an object/string/array\n*/\nclassNames('test', undefined);\n// =\u003e 'test '\n\nclassNames(null, 'test');\n// =\u003e ' test'\n\n/* Multiple of same value will not be removed as there is no need */\nclassNames('test', 'test', 'test');\n// =\u003e 'test test test'\n```\n\n### NOTE: extra spaces will not affect use with DOM elements (includes framework elements like React)\n\n## What about using it in React.js?\n\nYou simply pass the call to `classNames()` as the value for the attribute `className={}`\n\n```jsx harmony\n/* REACT CLASS COMPONENT */\nclass MyComponent extends React.Component {\n  render() {\n    const { className } = this.props;\n    return \u003cdiv className={classNames('test', className)}\u003e\u003c/div\u003e;\n  }\n}\n\n/* REACT FUNCTION COMPONENT */\nfunction MyComponent({ className }) {\n  return \u003cdiv className={classNames('test', className)}\u003e\u003c/div\u003e;\n}\n```\n\n# License\n[MIT](https://github.com/ChrisBrownie55/classnames/blob/master/LICENSE) Copyright © 2018 Christopher Brown\n\nInfluenced by Jed Watson's [classnames](https://github.com/JedWatson/classnames)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandria-dev%2Fclassnames","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandria-dev%2Fclassnames","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandria-dev%2Fclassnames/lists"}