{"id":19233006,"url":"https://github.com/welingtonms/classy","last_synced_at":"2026-05-01T21:03:19.183Z","repository":{"id":38081158,"uuid":"333493133","full_name":"welingtonms/classy","owner":"welingtonms","description":"No more applying conditional CSS classes or styles manually! This library helps you handle assigning style that relies on multiple combinations of props or conditionals.","archived":false,"fork":false,"pushed_at":"2023-02-04T12:03:23.000Z","size":1150,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-22T21:04:47.855Z","etag":null,"topics":["classy","conditional","conditional-statements","conditional-styling","css-in-js","react","styled-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/welingtonms.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2021-01-27T16:38:42.000Z","updated_at":"2022-06-20T02:46:46.000Z","dependencies_parsed_at":"2023-02-08T07:16:04.294Z","dependency_job_id":null,"html_url":"https://github.com/welingtonms/classy","commit_stats":null,"previous_names":["cheesebit/classy"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/welingtonms%2Fclassy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/welingtonms%2Fclassy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/welingtonms%2Fclassy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/welingtonms%2Fclassy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/welingtonms","download_url":"https://codeload.github.com/welingtonms/classy/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240310872,"owners_count":19781341,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["classy","conditional","conditional-statements","conditional-styling","css-in-js","react","styled-components"],"created_at":"2024-11-09T16:08:24.585Z","updated_at":"2026-05-01T21:03:14.154Z","avatar_url":"https://github.com/welingtonms.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# classy\n\nThis library helps you to handle assigning style that relies on multiple combinations of `props` or conditionals.\n\n[![Coverage Status](https://img.shields.io/coveralls/github/welingtonms/classy?style=flat-square)](https://coveralls.io/github/welingtonms/classy)\n[![npm package](https://img.shields.io/npm/v/@welingtonms/classy?style=flat-square)](https://www.npmjs.com/package/@welingtonms/classy)\n\n## What problem do we want to solve here?\n\nLet's suppose you have some good old conditional classes to be applied to an element:\n\n```jsx\n\u003cButton className={ `my-button ${ disabled ? 'is-disabled' : '' }` }\u003e\n\tMy Cool Button\n\u003c/Button\u003e\n```\n\nYou could write:\n\n```jsx\nimport { classy } from '@welingtonms/classy';\n\n\u003cButton\n\tclassName={ classy( 'my-button', {\n\t\t'is-disabled': disabled,\n\t} ) }\n\u003e\n\tMy Cool Button\n\u003c/Button\u003e;\n```\n\nOr, let's say you have a React component with props such as `colorScheme`, `variant`, `validationStatus`, `disabled`, and so on.\n\nIf you dare to style your component conditionally according to these props, you would have to write something like:\n\n```jsx\n  import clsx from 'clsx'\n\n  const { colorScheme, variant, validationStatus, disabled } = props\n\n  \u003cButton\n    className={clsx({\n      'some class combination a': colorScheme == 'dark' \u0026\u0026 variant == 'primary',\n      'some class combination b': (colorScheme == 'light' || colorScheme == 'dark') \u0026\u0026 variant == 'secondary' \u0026\u0026 validationStatus == 'valid',\n      'some class combination c': colorScheme == 'dark' || variant == 'terciary',\n      'some class combination d': !disabled\n    })}\n  \u003e\n    My Cool Button\n  \u003c/Button\u003e\n```\n\nWell, what if you could write something like:\n\n```jsx\n  import useClassy from '@welingtonms/classy'\n\n  const { prop, classy } = useClassy(props)\n  const { disabled } = props\n\n  \u003cButton\n    className={classy({\n      'some class combination a': prop({ colorScheme:'dark', variant == 'primary' }),\n      'some class combination b': prop({ colorScheme: ['light', 'dark'], variant: 'secondary', validationStatus: 'valid' }),\n      'some class combination c': prop([{ colorScheme: 'dark' }, { variant: 'terciary' }],\n      'some class combination d': !disabled, // or prop({ disabled: false })\n    })}\n  \u003e\n    My Cool Button\n  \u003c/Button\u003e\n```\n\nCool, huh?!\n\nOr if you were using some CSS-in-JS library like [`styled-components`](https://styled-components.com/), you would have something like:\n\n```jsx\nimport styled from 'styled-components';\n\nconst Button = styled.button`\n\tbackground: ${ ( { variant, scheme } ) =\u003e ( {\n\t\t'$button-primary-background': variant == 'primary',\n\t\t'$button-secondary-background':\n\t\t\tvariant == 'secondary' \u0026\u0026 scheme == 'light',\n\t\t'$button-secondary-dark-background':\n\t\t\tvariant == 'secondary' \u0026\u0026 scheme == 'dark',\n\t\t'$button-terciary-background': variant == 'terciary',\n\t} ) };\n\n\tborder-color: ${ ( { variant, scheme } ) =\u003e ( {\n\t\t'$button-primary-border-color': variant == 'primary',\n\t\t'$button-secondary-border-color':\n\t\t\tvariant == 'secondary' \u0026\u0026 scheme == 'light',\n\t\t'$button-secondary-dark-border-color':\n\t\t\tvariant == 'secondary' \u0026\u0026 scheme == 'dark',\n\t\t'$button-terciary-border-color': variant == 'terciary',\n\t} ) };\n\n\tcolor: ${ ( { variant, scheme } ) =\u003e ( {\n\t\t'$button-primary-color': variant == 'primary',\n\t\t'$button-secondary-color': variant == 'secondary' \u0026\u0026 scheme == 'light',\n\t\t'$button-secondary-dark-color':\n\t\t\tvariant == 'secondary' \u0026\u0026 scheme == 'dark',\n\t\t'$button-terciary-color': variant == 'terciary',\n\t} ) };\n`;\n```\n\nWell, what about something simpler like:\n\n```jsx\nimport { classier, prop } from '@welingtonms/classy';\n\nconst Button = styled.button`\n\tbackground: ${ classier( {\n\t\t'$button-primary-background': prop( { variant: 'primary' } ),\n\t\t'$button-secondary-background': prop( {\n\t\t\tvariant: 'secondary',\n\t\t\tscheme: 'light',\n\t\t} ),\n\t\t'$button-secondary-dark-background': prop( {\n\t\t\tvariant: 'secondary',\n\t\t\tscheme: 'dark',\n\t\t} ),\n\t\t'$button-terciary-background': prop( { variant: 'terciary' } ),\n\t} ) };\n\n\tborder-color: ${ classier( {\n\t\t'$button-primary-border-color': prop( { variant: 'primary' } ),\n\t\t'$button-secondary-border-color': prop( {\n\t\t\tvariant: 'secondary',\n\t\t\tscheme: 'light',\n\t\t} ),\n\t\t'$button-secondary-dark-border-color': prop( {\n\t\t\tvariant: 'secondary',\n\t\t\tscheme: 'dark',\n\t\t} ),\n\t\t'$button-terciary-border-color': prop( { variant: 'terciary' } ),\n\t} ) };\n\n\tcolor: ${ classier( {\n\t\t'$button-primary-color': prop( { variant: 'primary' } ),\n\t\t'$button-secondary-color': prop( {\n\t\t\tvariant: 'secondary',\n\t\t\tscheme: 'light',\n\t\t} ),\n\t\t'$button-secondary-dark-color': prop( {\n\t\t\tvariant: 'secondary',\n\t\t\tscheme: 'dark',\n\t\t} ),\n\t\t'$button-terciary-color': prop( { variant: 'terciary' } ),\n\t} ) };\n`;\n```\n\n`classy` gives you more power to represent conditionals and helps you declutter your styling, making it more purposeful.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwelingtonms%2Fclassy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwelingtonms%2Fclassy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwelingtonms%2Fclassy/lists"}