{"id":15069927,"url":"https://github.com/d3dc/classier-react","last_synced_at":"2026-02-09T14:34:08.932Z","repository":{"id":57199585,"uuid":"143223116","full_name":"d3dc/classier-react","owner":"d3dc","description":"Use stylesheets for styles, not Javascript","archived":false,"fork":false,"pushed_at":"2018-09-24T18:52:52.000Z","size":96,"stargazers_count":1,"open_issues_count":6,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-05T04:38:26.217Z","etag":null,"topics":["classname","classnames","css","react","stylesheets"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/d3dc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-02T00:49:34.000Z","updated_at":"2018-09-22T22:46:43.000Z","dependencies_parsed_at":"2022-09-16T15:01:33.744Z","dependency_job_id":null,"html_url":"https://github.com/d3dc/classier-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/d3dc/classier-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d3dc%2Fclassier-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d3dc%2Fclassier-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d3dc%2Fclassier-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d3dc%2Fclassier-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/d3dc","download_url":"https://codeload.github.com/d3dc/classier-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d3dc%2Fclassier-react/sbom","scorecard":{"id":315730,"data":{"date":"2025-08-11","repo":{"name":"github.com/d3dc/classier-react","commit":"156f944bf655debcebed907d5a48499e6aea1515"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2,"checks":[{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE.md:0","Info: FSF or OSI recognized license: ISC License: LICENSE.md:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 3 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"84 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97","Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6","Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9","Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f","Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p","Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv","Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8","Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65","Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j","Warn: Project is vulnerable to: GHSA-pc5p-h8pf-mvwp","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546","Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574","Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3","Warn: Project is vulnerable to: GHSA-f9cm-qmx5-m98h","Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp","Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr","Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6","Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7","Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v","Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx","Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-18T00:08:36.481Z","repository_id":57199585,"created_at":"2025-08-18T00:08:36.481Z","updated_at":"2025-08-18T00:08:36.481Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29268948,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-09T13:47:44.167Z","status":"ssl_error","status_checked_at":"2026-02-09T13:47:43.721Z","response_time":56,"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","css","react","stylesheets"],"created_at":"2024-09-25T01:45:36.714Z","updated_at":"2026-02-09T14:34:08.896Z","avatar_url":"https://github.com/d3dc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎩 Classier React 🥂\n\n![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/classier-react.svg)\n![npm (tag)](https://img.shields.io/npm/v/classier-react.svg)\n[![Build Status](https://travis-ci.com/d3dc/classier-react.svg?branch=master)](https://travis-ci.com/d3dc/classier-react)\n![npm](https://img.shields.io/npm/l/classier-react.svg)\n\n`classier-react` automatically lets you access your stylesheet utilty classes as props on [Box](#box-) and can generate react components for the elements in your CSS modules.\n\n```jsx\nconst Button = props =\u003e (\n  \u003cBox rounded bg=\"blue\" py={2} px={4} {...props} is=\"button\" /\u003e\n)\n```\n\nWe know awesome stylesheets are out there for browsers, its just awkward to make use of them when working with JSX. Cramming everything into that `className` string feels wrong and our brains have to remember how the styles were written.\n\n`classier-react` solves the problem by simply translating from props to CSS classes. Its not generating code and its not pushing the browser to its limits.\n\nThink of it like `classnames` with superpowers.\n\n## Install\n\n```\nnpm install classier-react\n```\n\n## Getting started\n\nYou'll have to have configured your app with a stylesheet to use the tool. Webpack can have a style loader or you might even include your favorite library straight in the `\u003chead\u003e` tag.\n\nSee the [TailwindCSS Recipe](docs/recipes/tailwindcss.md) to add the classes used in the examples to a `create-react-app` app.\n\n## Usage\n\n_Note: This example uses utility classes from [TailwindCSS](https://tailwindcss.com/docs/)._\n\nYou'll define your presentational components:\n\n```jsx\nimport { Box, Comp } from 'classier-react'\n\nconst Card = props =\u003e (\n  \u003cBox\n    rounded\n    shadow={['md', { hover: 'lg' }]}\n    maxW=\"sm\"\n    overflow=\"hidden\"\n    {...props}\n  /\u003e\n)\n\nconst CardHeroImage = ({ src, ...rest }) =\u003e (\n  \u003cComp w=\"full\" border={[1, 'black']} {...rest}\u003e\n    \u003cimg src={src} /\u003e\n  \u003c/Comp\u003e\n)\n\nconst CardTitle = ({ size = 5, ...rest }) =\u003e (\n  \u003cBox is={'h' + size} text=\"xl\" font=\"bold\" mb={2} {...rest} /\u003e\n)\n\nconst CardBody = props =\u003e \u003cBox px={6} py={4} {...props} /\u003e\n```\n\nAnd then consume them as usual:\n\n```jsx\n\u003cCard maxW=\"md\"\u003e\n  \u003cCardHeroImage src={image} border={false} /\u003e\n  \u003cCardTitle size={4}\u003eSo Classy\u003c/CardTitle\u003e\n  \u003cCardBody font=\"semibold\"\u003eLorem ipsum...\u003c/CardBody\u003e\n\u003c/Card\u003e\n```\n\n## Translation to style names\n\nUnder the hood, `classier-react` assumes any unknown props are declared as modifiers in your stylesheet. Props are translated to these declarations according to simple rules:\n\n- Any props with an explicit `false` value are omitted\n\n- prop values are appended to their names\n\n  - each value of an array will generate its own prop class\n\n  - each key of an object will generate a variant prop class\n\n- camelCase words become kebab-cased\n\n- Sentence-casing is preserved but not added\n\n## Passing down styles\n\n`\u003cComp /\u003e` only injects the props it merges, it can't make sure they are rendered. If you're wrapping or writing a component, you'll want to to pass any props you don't use or specifically ignore onward to what is rendered.\n\nAn unsafe, but easy, way to this is to make use of the spread operator:\n\n```jsx\nconst MyComponent = ({ option, ...rest }) =\u003e \u003cBox {...rest} /\u003e\n```\n\n## CSS Modules\n\n`classier-react` supports using CSS Modules through dynamic object keys:\n\n```jsx\nimport styles from './styles.css'\n\n...\n\n\u003cBox {...{\n  [styles.fontSize]: 'md'\n}} {...rest} /\u003e\n```\n\n## Avoiding mixing domains\n\nYou can also use `cx` and pass around the resulting string yourself:\n\n```js\nimport { cx } from 'classier-react'\n\n...\n\nconst containerClassName = cx(props.styled)\n```\n\n## API\n\n```js\nimport { Box, Text, Comp, cx, configure } from 'classier-react'\n```\n\n---\n\n### `\u003cBox /\u003e`\n\nRenders a tag with its unknown props translated to CSS classes.\n\n#### props\n\n- **is**: the tag to render as (_default: 'div'_)\n\n---\n\n### `\u003cText /\u003e`\n\nRenders a span with all its props translated to CSS classes.\n\n---\n\n### `\u003cComp /\u003e`\n\nA _HOC_ for injecting or \"composing\" style props. Merges its `style`, `className`, and the rest of its props as classes into the props of a child component.\n\n---\n\n### `cx(props, ...extraClasses)`\n\nTransform the passed props into a className string. Called by Box and Comp.\n\n---\n\n### `configure(opts)`\n\nLets you change the global behavior of `cx`\n\n#### opts\n\n- **kebabCase** - Transform names and values from camelCase. Reverses `style-loader`. (_default: true_)\n\n- **keepSentence** - When kebabing, lower-case everything but the first word (_default: true_)\n\n- **join.words** - the string to insert between the words in a camelCase identifier (_default: '-'_)\n\n- **join.value** - the string used to separate a value (_default: '-'_)\n\n- **join.variant** - the string used to separate a variant from its modifier(_default: ':'_)\n\n- **join.block** - the string to insert before nested blocks or elements (_default: '-'_)\n\n- **join.modifier** - the string used to separate the block identifier from the modifier name (_default: '-'_)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd3dc%2Fclassier-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fd3dc%2Fclassier-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd3dc%2Fclassier-react/lists"}