{"id":19846713,"url":"https://github.com/chempogonzalez/classname-manager","last_synced_at":"2026-04-07T09:31:34.756Z","repository":{"id":122715407,"uuid":"571357875","full_name":"chempogonzalez/classname-manager","owner":"chempogonzalez","description":"🖌️ ClassName Manager to easily get classes for component variants","archived":false,"fork":false,"pushed_at":"2023-05-30T01:25:06.000Z","size":123,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-09T10:49:11.089Z","etag":null,"topics":["classname","classnames","css","manager","tailwindcss"],"latest_commit_sha":null,"homepage":"","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/chempogonzalez.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}},"created_at":"2022-11-27T23:58:47.000Z","updated_at":"2023-01-10T18:16:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"39207e2f-d0f8-4719-a28f-8edc82af1501","html_url":"https://github.com/chempogonzalez/classname-manager","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chempogonzalez/classname-manager","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chempogonzalez%2Fclassname-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chempogonzalez%2Fclassname-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chempogonzalez%2Fclassname-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chempogonzalez%2Fclassname-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chempogonzalez","download_url":"https://codeload.github.com/chempogonzalez/classname-manager/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chempogonzalez%2Fclassname-manager/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31507963,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T03:10:19.677Z","status":"ssl_error","status_checked_at":"2026-04-07T03:10:13.982Z","response_time":105,"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":["classname","classnames","css","manager","tailwindcss"],"created_at":"2024-11-12T13:12:20.005Z","updated_at":"2026-04-07T09:31:34.736Z","avatar_url":"https://github.com/chempogonzalez.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🖌️ classname-manager\n[![npm version](https://img.shields.io/npm/v/classname-manager?color=blue\u0026style=flat-square)](https://www.npmjs.com/package/classname-manager)\n[![bundle-size](https://img.shields.io/bundlephobia/minzip/classname-manager/latest?color=orange\u0026style=flat-square)](https://bundlephobia.com/package/classname-manager@latest)\n\nClassNames manager to easily get classes for component variants\n\n\n\n\u003e Super tiny manager to merge, extend and dynamically add class names focused on variations\n\u003e\n\u003e \n## 🚀 **Features**\n- ✅ Super simple and minimalistic\n- 🔑 Type-safe (Typescript)\n- ❌ No more manual matching classes to props or adding types\n- 🧬 TailwindCSS Intellisense support\n\n## 📦 **Install**\n```bash\n# NPM\nnpm install classname-manager\n\n# YARN\nyarn add classname-manager\n\n# PNPM\npnpm add classname-manager\n```\n## 💻 **Usage example**\n\n```tsx\nimport { classNameManager } from 'classname-manager'\n\ninterface ButtonProps {\n  styleType: 'primary' | 'secondary'\n  color: 'light' | 'dark'\n  disabled: boolean\n}\n\n/**\n * Define once the class schema\n * based on possible values from props\n * \n * @example \n *  - props: { styleType: 'primary', color: 'light' }\n *    Result: 'btn btn-primary text-black bg-white'\n * \n */\nconst getButtonClassName = classNameManager\u003cButtonProps\u003e({\n  base: 'btn',\n  dynamicVariants: {\n    styleType: {\n      primary: 'btn-primary',\n      secondary: 'btn-secondary',\n    },\n    color: {\n      light: 'text-black bg-white',\n      dark: 'text-white bg-black',\n    },\n    disabled: {\n      true: 'btn-disabled bg-gray'\n    }\n  }\n})\n\n\nconst Button = (props: ButtonProps) =\u003e {\n  const btnClassName = getButtonClassName(props)\n\n  return (\n    \u003cbutton className={btnClassName}\u003e{props.label}\u003c/button\u003e\n  )\n}\n```\n\n\u003cbr\u003e\n\n\n\n\n## 🧬 TailwindCSS Plugin config _(VSCode)_\nIn order to allow the tailwindcss plugin intellisense to work properly with `classname-manager` you will need to add the following code to your **`settings.json`** file\n\n```jsonc\n// your project \u003e .vscode (folder) \u003e settings.json\n{\n  \"tailwindCSS.experimental.classRegex\": [\n    [ \"cnm([^ç]*?(base\\\\:|dynamicVariants\\\\:)+[^ç]*?)\\\\}\\\\);?(\\r\\n|\\r|\\n)\", \"[\\\"'`]([^\\\"'`]*).*?[\\\"'`]\" ],\n    [ \"classNameManager([^ç]*?(base\\\\:|dynamicVariants\\\\:)+[^ç]*?)\\\\}\\\\);?(\\r\\n|\\r|\\n)\", \"[\\\"'`]([^\\\"'`]*).*?[\\\"'`]\" ]\n  ]\n}\n```\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n## 📖 Documentation\n\nThe package exports 2 names for the main function, both executes the same:\n- `classNameManager`\n- `cnm` _(Reduced name)_\n\n\n\n### ⭐ Initialization\n\n```tsx\nimport { cnm } from 'classname-manager'\n\n// By schema object\nconst getClassName = cnm({ /** Your schema */ })\n\n// By callback returning the schema object\nconst getClassName = cnm((props) =\u003e ({ /** Your schema */ }))\n\n```\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\n### 🔖 SCHEMA object properties\n\n\u003e All schema properties values can be either a string or an array of strings\n\n\u003cbr\u003e\n\n#### 🟣 `base` _(string | Array\\\u003cstring\\\u003e)_\nClass to be placed at the beginning of the returned value\n\n```ts\nconst getClassName = cnm({ base: 'btn', /*...*/ })\n// Result: 'btn (other classes)'\n```\n\n\u003cbr\u003e\n\n#### 🟣 `dynamicVariants` _(object)_\nHere is where you define your classes based on props passed in to the function. \u003cbr\u003e_(For boolean values the expected properties are: true and false)_\n\n```ts\nconst getClassName = cnm({\n  base: 'btn',\n  dynamicVariants: {\n    styleType: {\n      primary: 'btn-primary',\n      secondary: 'btn-secondary',\n    },\n    enabled: {\n      true: 'bg-transparent',\n      false: 'bg-gray',\n    }\n  }\n})\n\ngetClassName({ styleType: 'secondary' })\n// Result: 'btn btn-secondary'\n```\n\nThe example above doesn't return any value from the `enabled` property because it's not passed in the function call. You can handle this by adding a `DEFAULT` property to the schema object values\n##### - DEFAULT dynamicVariant value\n\n```diff\nconst getClassName = cnm({\n  base: 'btn',\n  dynamicVariants: {\n    styleType: {\n      primary: 'btn-primary',\n      secondary: 'btn-secondary',\n    },\n    enabled: {\n+     DEFAULT: false,\n      true: 'bg-transparent',\n      false: 'bg-gray',\n    }\n  }\n})\n\ngetClassName({ styleType: 'secondary' })\n+ // Result: 'btn btn-secondary bg-gray'\n```\n\n\u003e **Note:** Although you can use the `DEFAULT` property, it is optional. \u003cbr\u003eIn most cases it's recommended to initialize props with a _`default value from js/ts`_ side to have a better control if you need to use it in other places\n\n\n\n\u003cbr\u003e\n\n#### 🟣 `dynamicClassNames` _(object)_\nIn case you need to apply some logic to calculate if some classes should be added, you can add it like the example below:\n\n```ts\nconst getClassName = cnm(({ status }) =\u003e {\n  const isDisabled = isButtonDisabled(status)\n  return {\n    base: 'btn',\n    dynamicVariants: {\n      styleType: {\n        primary: 'btn-primary',\n        secondary: 'btn-secondary',\n      }\n    },\n    dynamicClassNames: {\n      'btn--disabled': isDisabled\n    }\n  }\n})\n// -----------------------------------\n\ngetClassName({ status: 'triggered' })\n// Result: 'btn btn--disabled'\n```\n\n\u003cbr\u003e\n\n### ⏬ Returned function\nWhen you define your schema, it returns another function that you can use to get the class names based on the props passed in. You can pass an extra property:\n\n#### 🟣 `extraClassNames` _property (string | Array\\\u003cstring\\\u003e)_\nYou can add extra classes to the end of the returned value by using the `extraClassNames` property\n\n```ts\ninterface ButtonProps {\n  styleType: 'primary' | 'secondary'\n}\n\nconst getClassName = cnm\u003cButtonProps\u003e({\n  base: 'btn',\n  /* your schema */\n})\n\n/**\n * It allows you to pass extra classes at\n * the end of the returned value\n */\ngetClassName({ styleType: 'primary', extraClassNames: 'font-bold' })\n// Result: 'btn btn-primary font-bold'\n```\n\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\u003e Created with Typescript! ⚡ and latin music 🎺🎵\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchempogonzalez%2Fclassname-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchempogonzalez%2Fclassname-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchempogonzalez%2Fclassname-manager/lists"}