{"id":50115432,"url":"https://github.com/toviszsolt/clsx-react","last_synced_at":"2026-05-23T14:34:22.871Z","repository":{"id":354894283,"uuid":"1128065145","full_name":"toviszsolt/clsx-react","owner":"toviszsolt","description":"A custom React JSX runtime that natively supports arrays and objects in the className prop. It automatically applies clsx logic at the runtime level, keeping your code clean and your imports empty.","archived":false,"fork":false,"pushed_at":"2026-04-30T18:21:12.000Z","size":569,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-30T20:13:19.619Z","etag":null,"topics":["classname","classnames","clsx","css","jsx","jsx-runtime","jsx-syntax","react","reactjs","styling-react","typescript","utility-classes"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/p/devbox/broken-fog-m82g3j?file=%2Fapp%2Flayout.tsx%3A1%2C1","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/toviszsolt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":"FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","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},"funding":{"github":["toviszsolt"],"paypal":["toviszsolt"]}},"created_at":"2026-01-05T04:54:30.000Z","updated_at":"2026-04-30T18:20:01.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/toviszsolt/clsx-react","commit_stats":null,"previous_names":["toviszsolt/clsx-react"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/toviszsolt/clsx-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toviszsolt%2Fclsx-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toviszsolt%2Fclsx-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toviszsolt%2Fclsx-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toviszsolt%2Fclsx-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/toviszsolt","download_url":"https://codeload.github.com/toviszsolt/clsx-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toviszsolt%2Fclsx-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33400248,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-23T04:15:53.637Z","status":"ssl_error","status_checked_at":"2026-05-23T04:15:53.242Z","response_time":53,"last_error":"SSL_read: 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","clsx","css","jsx","jsx-runtime","jsx-syntax","react","reactjs","styling-react","typescript","utility-classes"],"created_at":"2026-05-23T14:34:20.786Z","updated_at":"2026-05-23T14:34:22.865Z","avatar_url":"https://github.com/toviszsolt.png","language":"JavaScript","funding_links":["https://github.com/sponsors/toviszsolt","toviszsolt","https://www.paypal.com/paypalme/toviszsolt"],"categories":[],"sub_categories":[],"readme":"![Cover Image](cover.png)\n\n[![GitHub License](https://img.shields.io/github/license/toviszsolt/clsx-react)](https://github.com/toviszsolt/clsx-react/blob/main/LICENSE) [![npm](https://img.shields.io/npm/v/clsx-react?style=flat\u0026color=red)](https://www.npmjs.com/package/clsx-react) [![GitHub Repo stars](https://img.shields.io/github/stars/toviszsolt/clsx-react?color=DAAA3F)](https://github.com/toviszsolt/clsx-react/stargazers) [![Run tests](https://github.com/toviszsolt/clsx-react/actions/workflows/test.yml/badge.svg)](https://github.com/toviszsolt/clsx-react/actions/workflows/test.yml) [![codecov](https://codecov.io/gh/toviszsolt/clsx-react/branch/main/graph/badge.svg?token=IJWL1A7SXQ)](https://codecov.io/gh/toviszsolt/clsx-react) [![Sponsor](https://img.shields.io/static/v1?label=sponsor\u0026message=❤\u0026color=ff69b4)](https://github.com/sponsors/toviszsolt)\n\n# `clsx-react` - JSX Super Power for `className`\n\n**Stop importing `clsx` or `classnames` manually.**\n\n`clsx-react` is a zero dependency, super tiny, custom React JSX runtime that natively supports **arrays** and **objects** in the `className` prop. It automatically applies `clsx` logic at the runtime level, keeping your code clean and your imports empty.\n\n## The Problem\n\nYou need conditional class names in your React components, but importing and using `clsx` or `classnames` everywhere leads to repetitive boilerplate code.\n\n```jsx\n// ❌ Old way: Boilerplate everywhere\nimport clsx from 'clsx'; // or classnames\n\nexport const Button = ({ active, disabled }) =\u003e (\n  \u003cbutton className={clsx('btn', { 'btn-active': active, 'btn-disabled': disabled })}\u003eClick me\u003c/button\u003e\n);\n```\n\n## The Solution\n\nNo more imports or boilerplate. Just use arrays and objects directly in `className`. Strings still work as usual.\n\n```jsx\n// ✅ New way: Zero imports, native syntax\nexport const Button = ({ active, disabled }) =\u003e (\n  \u003cbutton className={['btn', { 'btn-active': active, 'btn-disabled': disabled }]}\u003eClick me\u003c/button\u003e\n);\n```\n\n## Installation\n\n```bash\nnpm install clsx-react\n# or\nyarn add clsx-react\n# or\npnpm add clsx-react\n```\n\n\u003e **Note:** Requires `react` \u003e= 17.0.0.\n\n## Configuration\n\nTo make this work, you need to tell your compiler to use this package as the JSX Import Source instead of the default `react`. Let me guide you through the setup for various environments.\n\n### 1. TypeScript (`tsconfig.json`) / JavaScript (`jsconfig.json`) - **Recommended**\n\nThis handles both the compilation and the type definitions (so TS won't complain about arrays in `className`).\n\n```json\n{\n  \"compilerOptions\": {\n    \"jsx\": \"react-jsx\",\n    \"jsxImportSource\": \"clsx-react\"\n  }\n}\n```\n\n---\n\n### 2. Vite (`vite.config.ts`) / Esbuild\n\nIf you are using Vite, you can set it explicitly in the config:\n\n```javascript\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n\nexport default defineConfig({\n  plugins: [react()],\n  esbuild: {\n    jsxImportSource: 'clsx-react',\n  },\n});\n```\n\n---\n\n### 3. Next.js / SWC / Turbopack\n\nNext.js usually respects `tsconfig.json` or `jsconfig.json`. Ensure your `compilerOptions` are set as shown in step 1.\n\n---\n\n### 4. Babel / Webpack\n\nIf you are using Babel, you can set the `jsxImportSource` in your Babel config:\n\n```json\n{\n  \"presets\": [\n    [\n      \"@babel/preset-react\",\n      {\n        \"runtime\": \"automatic\",\n        \"importSource\": \"clsx-react\"\n      }\n    ]\n  ]\n}\n```\n\n## Usage Examples\n\nOnce configured, you can use `className` just like you would use the `clsx` function arguments.\n\n### Conditional Classes (Object)\n\n```jsx\n\u003cdiv className={{ hidden: isHidden, flex: isFlex }}\u003e...\u003c/div\u003e\n```\n\n### Arrays\n\n```jsx\n\u003cdiv className={['text-lg', 'font-bold', isError \u0026\u0026 'text-red-500']}\u003e...\u003c/div\u003e\n```\n\n### Mixed \u0026 Nested\n\n```jsx\n\u003cdiv className={['p-4', { 'bg-gray-100': !dark }, ['shadow-md', 'rounded']]}\u003e...\u003c/div\u003e\n```\n\n### Standard String (Still works)\n\n```jsx\n\u003cdiv className=\"just-a-string\"\u003e...\u003c/div\u003e\n```\n\n## How it works\n\nThis package wraps the standard `react/jsx-runtime` and `react/jsx-dev-runtime`. It intercepts the creation of every JSX element:\n\n1. Checks if `className` prop exists.\n2. Checks if `className` is **not** a string (array or object).\n3. If so, it processes it with a bundled, lightweight version of `clsx`.\n4. Passes the processed props to the original React runtime.\n\nIt adds negligible overhead (bytes) and eliminates the need to manually import and call class utilities in every single component file.\n\n## TypeScript Support\n\nThis package includes a global augmentation for `React.HTMLAttributes`. Once you set `\"jsxImportSource\": \"clsx-react\"` in your `tsconfig.json`, TypeScript will automatically understand that `className` accepts arrays and objects. No extra `.d.ts` configuration needed!\n\n## Guidelines\n\nSee [Code of Conduct](./CODE_OF_CONDUCT.md), [Contributing](./CONTRIBUTING.md), and [Security Policy](./SECURITY.md).\n\n## License\n\nMIT License © 2026 [Zsolt Tövis](https://github.com/toviszsolt)\n\nIf you find this project useful, please consider [sponsoring me on GitHub](https://github.com/sponsors/toviszsolt), [PayPal](https://www.paypal.com/paypalme/toviszsolt), or [give the repo a star](https://github.com/toviszsolt/clsx-react).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoviszsolt%2Fclsx-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftoviszsolt%2Fclsx-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoviszsolt%2Fclsx-react/lists"}