{"id":19650382,"url":"https://github.com/frozzare/react-classed","last_synced_at":"2026-05-02T08:33:56.125Z","repository":{"id":42907357,"uuid":"234067466","full_name":"frozzare/react-classed","owner":"frozzare","description":"Create React components with CSS classes","archived":false,"fork":false,"pushed_at":"2023-07-18T20:36:30.000Z","size":1042,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-27T01:18:44.033Z","etag":null,"topics":["classnames","css","react","styled"],"latest_commit_sha":null,"homepage":null,"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/frozzare.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":"2020-01-15T11:40:06.000Z","updated_at":"2023-03-04T06:35:20.000Z","dependencies_parsed_at":"2023-02-01T05:31:28.164Z","dependency_job_id":null,"html_url":"https://github.com/frozzare/react-classed","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/frozzare/react-classed","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frozzare%2Freact-classed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frozzare%2Freact-classed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frozzare%2Freact-classed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frozzare%2Freact-classed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/frozzare","download_url":"https://codeload.github.com/frozzare/react-classed/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frozzare%2Freact-classed/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32528237,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-02T01:12:54.858Z","status":"online","status_checked_at":"2026-05-02T02:00:05.923Z","response_time":132,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["classnames","css","react","styled"],"created_at":"2024-11-11T14:58:23.093Z","updated_at":"2026-05-02T08:33:56.107Z","avatar_url":"https://github.com/frozzare.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-classed\n\n[![Build Status](https://github.com/frozzare/react-classed/workflows/test/badge.svg)](https://github.com/frozzare/react-classed/actions)\n![npm (scoped)](https://img.shields.io/npm/v/react-classed)\n\n\nCreate React components with CSS classes. Perfect when using a CSS framework, e.g [Tailwind](https://tailwindcss.com/).\n\n## Installation\n\n```\nnpm install --save react-classed\n```\n\n## Usage\n\nCreate React components with CSS classes, inspired by [styled-components](https://styled-components.com/) and other styled packages.\n\n```js\nimport React from 'react';\nimport { render } from 'react-dom';\nimport classed from 'react-classed';\n\nconst Text = classed.p`text-blue-500`;\n\nconst Link = classed.a([\n    'text-green-500',\n    ({ href }) =\u003e ({\n        'bg-red-500': href \u0026\u0026 href.startsWith('http')\n    })\n]);\n\nconst App = () =\u003e (\n    \u003cdiv\u003e\n        \u003cText\u003eBlue text\u003c/Text\u003e\n        \u003cLink\u003eA green link\u003c/Link\u003e\n        \u003cLink href=\"https://github.com\"\u003eA green link with red background\u003c/Link\u003e\n    \u003c/div\u003e\n)\n\nrender(\u003cApp /\u003e, document.getElementById('root'));\n```\n\nJust like a styled package you can create any html tag by using `classed.X`, `classed[x]` and `classed(x)`.\n\nYou can also use a existing component that accepts `className` prop:\n\n```js\nconst Button = props =\u003e \u003cbutton {...props}\u003e{props.children}\u003c/button\u003e;\nconst BlackButton = classed(Button)('bg-black');\n```\n\n### Dynamic classnames\n\nYou can pass an object or a function that takes a object of props:\n\n```js\n// object\nconst href = true;\nconst Link = classed.a({\n  'bg-red-500': href\n});\n\n// function\nconst Link = classed.a(({ href }) =\u003e ({\n  'bg-red-500': href \u0026\u0026 href.startsWith('http')\n}));\n\nconst App = () =\u003e (\n    \u003cdiv\u003e\n        \u003cLink\u003eA green link\u003c/Link\u003e\n        \u003cLink href=\"https://github.com\"\u003eA green link with red background\u003c/Link\u003e\n    \u003c/div\u003e\n)\n```\n\nFunctions can return a array of classNames:\n\n```js\nconst Link = classed.a(({ href }) =\u003e ['link', { 'bg-red-500': href \u0026\u0026 href.startsWith('http') }]);\n```\n\n### Array of classNames\n\nYou can pass an array of classnames and allow any type of other input:\n\n```js\nconst Link = classed.a([\n    'text-green-500',\n    ({ href }) =\u003e ({\n        'bg-red-500': href \u0026\u0026 href.startsWith('http')\n    })\n]);\n```\n\n### Template string\n\nYou can also use tagged template strings:\n\n```js\nconst Text = classed.p`text-blue-500`;\n```\n\nAnd with variables:\n\n```js\nconst hasError = true;\nconst Error = classed.p`${hasError \u0026\u0026 'error'}`;\n```\n\nAnd with functions to access `props`\n\n```js\nconst Link = classed.a`\n  text-green-500\n  ${({ href }) =\u003e ({\n    'bg-red-500': href \u0026\u0026 href.startsWith('http')\n  })}\n`\n```\n\nYou can return array, objects with true/false values and strings.\n\n### classnames package\n\nYou also support all input types of [classnames](https://jedwatson.github.io/classnames/).\n\n### Additional CSS\n\nYou can also add additional css and [styled-components](https://styled-components.com/) and [emotion](https://emotion.sh/) `css` functions or any input that are a object with `styles` string property or array of strings.\n\n```js\n// template string\nconst Text = classed.p(`text-blue-500`, `font-weight: bold`);\n\n// styled-components\nimport { css } from 'styled-components';\n\n// css() =\u003e ['font-weight: bold']\nconst Text = classed.p(`text-blue-500`, css(`font-weight: bold`));\n\n// emotion\nimport { css } from '@emotion/core';\n\n// css() =\u003e { styles: 'font-weight: bold' }\nconst Text = classed.p(`text-blue-500`, css(`font-weight: bold`));\n```\n\n## License\n\nMIT © [Fredrik Forsmo](https://github.com/frozzare)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrozzare%2Freact-classed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrozzare%2Freact-classed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrozzare%2Freact-classed/lists"}