{"id":12965,"library":"classcat","title":"Classcat","description":"Classcat is a minimalist, performant JavaScript utility for constructing HTML `class` attribute strings dynamically. It allows developers to combine strings, arrays, and objects (where keys are class names and values are booleans for conditional inclusion) into a single, space-delimited class string. The current stable version is 5.0.5, with releases occurring on an as-needed basis to address bug fixes, type improvements, and modernization efforts. Key differentiators include its small bundle size (217 B minified+gzipped), high performance (up to 2.5x faster than alternatives), and framework-agnostic nature, making it suitable for any JavaScript project, including those using React, Lit-HTML, or Mithril. Version 5.x introduced a shift to ES Modules as the primary distribution, modernizing the codebase and dropping some legacy support.","status":"active","version":"5.0.5","language":"javascript","source_language":"en","source_url":"https://github.com/jorgebucaran/classcat","tags":["javascript","classnames","classlist","class","typescript"],"install":[{"cmd":"npm install classcat","lang":"bash","label":"npm"},{"cmd":"yarn add classcat","lang":"bash","label":"yarn"},{"cmd":"pnpm add classcat","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Classcat adopted ES Modules as its primary distribution method in v5.0.0. CommonJS `require()` is no longer directly supported for the main entry point, though older bundles might exist for backward compatibility.","wrong":"const cc = require('classcat')","symbol":"cc","correct":"import cc from 'classcat'"},{"note":"For browser usage without a build step, import directly as an ES module. While older versions might have exposed a global `window.classcat`, the preferred modern approach is module-based.","wrong":"<script src=\"https://unpkg.com/classcat@5.0.5\"></script> // This will expose `window.classcat` if a UMD bundle is available, but the modern approach is ESM.","symbol":"cc (Browser Global)","correct":"<script type=\"module\"> import cc from 'https://unpkg.com/classcat@5.0.5'; </script>"}],"quickstart":{"code":"import cc from 'classcat';\n\ninterface ToggleButtonProps {\n  isOn: boolean;\n  toggle: (newValue: boolean) => void;\n}\n\n// Example of a functional component (e.g., React, Preact)\nconst ToggleButton = ({ isOn, toggle }: ToggleButtonProps) => {\n  const circleClasses = cc({\n    circle: true,\n    off: !isOn,\n    on: isOn,\n  });\n\n  const textClasses = cc({\n    textOff: !isOn,\n    textOn: isOn,\n  });\n\n  return `\n    <div class=\"btn\" onclick=\"${() => toggle(!isOn)}\">\n      <div class=\"${circleClasses}\" />\n      <span class=\"${textClasses}\">${isOn ? 'ON' : 'OFF'}</span>\n    </div>\n  `;\n};\n\n// Example usage (simplified for demonstration)\nconst myToggleButton = ToggleButton({ isOn: true, toggle: (value) => console.log('Toggled to', value) });\nconsole.log(myToggleButton);","lang":"typescript","description":"This quickstart demonstrates how to use `classcat` within a functional component to conditionally apply CSS classes based on component state, showcasing its usage with objects and booleans."},"warnings":[{"fix":"Migrate import statements from `const cc = require('classcat')` to `import cc from 'classcat'`. Ensure your build setup or Node.js environment supports ES Modules.","message":"Version 5.0.0 modernized the package to use ES Modules as its primary distribution. Projects using CommonJS `require()` will encounter errors and need to update their import statements to `import cc from 'classcat'` or configure their bundler appropriately.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Refactor inputs to avoid nested objects. Flatten any complex structures into a single object or array of class names. For instance, `cc([{ one: true }, { two: true }])` should become `cc({ one: true, two: true })` or `cc(['one', 'two'])`.","message":"Support for nested objects within the input array was removed in version 3.0.0. For example, `cc([{foo: true}, {bar: false}])` worked previously but now only `cc(['foo', 'bar'])` or `cc({foo: true, bar: false})` is intended.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Upgrade to the latest `classcat` version (5.0.5 or newer) to ensure accurate and complete TypeScript type definitions.","message":"In versions 5.0.4 and 5.0.5, type definitions for the default function name and supported types were corrected. Users on earlier 5.x versions might encounter TypeScript errors related to missing or incorrect typings.","severity":"gotcha","affected_versions":">=5.0.0 <5.0.4"},{"fix":"Review existing code where `classcat` is used with objects that might have all falsy values. Ensure the desired behavior aligns with this change, especially if an empty string or specific class was expected when all conditions are false.","message":"Version 2.0.0 introduced a change where keys are not added to the output string if all their child nodes evaluate to `false`. This might subtly alter output for conditional rendering logic relying on keys even when their values are falsy.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change your import statement from `const cc = require('classcat')` to `import cc from 'classcat'`.","cause":"Attempting to import `classcat` using CommonJS `require()` syntax in a modern ES Module environment, which is not supported since v5.0.0.","error":"ReferenceError: require is not defined"},{"fix":"Flatten the input structure. Instead of `cc([{ foo: { bar: true }}])`, use `cc({ foo: true })` if 'bar' is a sub-condition, or `cc({ 'foo-bar': true })` if it's a combined class name.","cause":"Providing nested objects as input to `cc()` after version 3.0.0, which no longer supports this pattern.","error":"Argument of type '{ foo: { bar: boolean; }; }' is not assignable to parameter of type 'string | number | object | string[]'."},{"fix":"Ensure you are using the correct default import syntax: `import cc from 'classcat'`.","cause":"Incorrect TypeScript import for the default export, often happens when trying `import { cc } from 'classcat'` or similar named import patterns.","error":"Property 'cc' does not exist on type 'typeof import(\"classcat\")'. Did you mean to access the default export with 'import cc from \"classcat\"'?"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}