{"id":16225404,"url":"https://github.com/dimaslz/react-dynamic-classname","last_synced_at":"2026-02-11T14:02:01.924Z","repository":{"id":37803132,"uuid":"451270587","full_name":"dimaslz/react-dynamic-classname","owner":"dimaslz","description":"React component to have a flexible className as Vue style but in React.","archived":false,"fork":false,"pushed_at":"2023-11-15T10:11:07.000Z","size":398,"stargazers_count":2,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-15T00:53:01.020Z","etag":null,"topics":["component","library","react"],"latest_commit_sha":null,"homepage":"https://react-dynamic-classname.dimaslz.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dimaslz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-01-24T00:45:38.000Z","updated_at":"2023-02-19T16:29:44.000Z","dependencies_parsed_at":"2023-11-15T11:27:55.812Z","dependency_job_id":"e7813769-4767-4976-8e4f-a5a5a99ee439","html_url":"https://github.com/dimaslz/react-dynamic-classname","commit_stats":{"total_commits":33,"total_committers":2,"mean_commits":16.5,"dds":0.303030303030303,"last_synced_commit":"ea65032c7d4d4ea4962a245696c673a2070c0c5c"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/dimaslz/react-dynamic-classname","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimaslz%2Freact-dynamic-classname","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimaslz%2Freact-dynamic-classname/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimaslz%2Freact-dynamic-classname/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimaslz%2Freact-dynamic-classname/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dimaslz","download_url":"https://codeload.github.com/dimaslz/react-dynamic-classname/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimaslz%2Freact-dynamic-classname/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29333910,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-11T12:42:24.625Z","status":"ssl_error","status_checked_at":"2026-02-11T12:41:23.344Z","response_time":97,"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":["component","library","react"],"created_at":"2024-10-10T12:44:56.835Z","updated_at":"2026-02-11T14:02:01.886Z","avatar_url":"https://github.com/dimaslz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @dimaslz/react-dynamic-classname\nReact component to have a flexible className as Vue style but in React.\n\n## Motivation\nI like to create tools and small libraries and, this was an excuse to create a library in React. Other motivatin is, under my experience, as I have worked with Vue with dynamic classes, has a better flexibility to work with directly in the template and, it is something that I do when I work in React and I have to apply some conditionals in the `className`.\n\nTo clarify: I do saying that is better, just is a different way. For me sometimes it is useful.\n\n## Installation\n\nnpm: `npm install @dimaslz/react-dynamic-classname`\n\nyarn: `yarn add @dimaslz/react-dynamic-classname`\n\n## Example\n\n### Pure React\n```tsx\n// ...\n\nexport const App = () =\u003e {\n\treturn (\n\t\t\u003cTAG className={\n\t\t\tconditionTrue ? \"class-a\": \"\",\n\t\t\tconditionFalse ? \"class-b\": \"\",\n\t\t\tconditionTrue ? \"class-c\": \"\",\n\t\t}\u003e\n\t\t\tDemo text\n\t\t\u003c/TAG\u003e\n\t)\n}\n\nexport default App\n```\n\n```html\n\u003c!-- will be rendered as: --\u003e\n\u003cTAG class=\"class-a class-c\"\u003e\n\tDemo text\n\u003c/TAG\u003e\n\n```\n\n### With this component\n```tsx\nimport { ReactDynamicClass } from '@dimaslz/react-dynamic-classname';\n\nexport const App = () =\u003e {\n\treturn (\n\t\t\u003cReactDynamicClassName\u003e\n\t\t\t// ...\n\t\t\t\u003cTAG className={{\n\t\t\t\t\"class-a\": true,\n\t\t\t\t\"class-b\": false,\n\t\t\t\t\"class-c\": true\n\t\t\t}}\u003e\n\t\t\t\tDemo text\n\t\t\t\u003c/TAG\u003e\n\t\t\t// ...\n\t\t\u003c/ReactDynamicClassName\u003e\n\t)\n}\n\nexport default App\n```\n\n```html\n\u003c!-- will be rendered as: --\u003e\n\u003cTAG class=\"class-a class-c\"\u003e\n\tDemo text\n\u003c/TAG\u003e\n\n```\n\nLive demo: [https://react-dynamic-classname.dimaslz.dev](https://react-dynamic-classname.dimaslz.dev)\n\n## Author\n```js\n{\n\tname: \"Dimas López\",\n\trole: \"FullStack Software development\",\n\talias: \"dimaslz\",\n\ttwitter: \"https://twitter.com/dimaslz\",\n\tsite: \"https://dimaslz.dev\",\n\tlinkedin: \"https://www.linkedin.com/in/dimaslopezzurita\"\n}\n```\n\n## My other projects\n- https://randomdata.loremapi.io: API mock data (no open source)\n- https://icon-lib-builder.dimaslz.dev: SVG to Framework component (open source soon)\n- https://ng-v-class.dimaslz.dev: Use dynamic class in Angular as Vue (open source)\n- https://ng-heroicons.dimaslz.dev: Use Heroicons.com in you Angular projects (open source)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimaslz%2Freact-dynamic-classname","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdimaslz%2Freact-dynamic-classname","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimaslz%2Freact-dynamic-classname/lists"}