{"id":13802752,"url":"https://github.com/inturn/classy","last_synced_at":"2025-05-13T13:32:45.285Z","repository":{"id":36431795,"uuid":"40736800","full_name":"inturn/classy","owner":"inturn","description":"React styling. Plain and simple.","archived":false,"fork":false,"pushed_at":"2017-08-03T22:06:38.000Z","size":837,"stargazers_count":23,"open_issues_count":0,"forks_count":2,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-04-22T12:07:08.757Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://inturn.github.io/classy/","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/inturn.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":"2015-08-14T21:28:41.000Z","updated_at":"2024-12-27T01:26:23.000Z","dependencies_parsed_at":"2022-08-18T18:41:26.386Z","dependency_job_id":null,"html_url":"https://github.com/inturn/classy","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inturn%2Fclassy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inturn%2Fclassy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inturn%2Fclassy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inturn%2Fclassy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/inturn","download_url":"https://codeload.github.com/inturn/classy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253950317,"owners_count":21989338,"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":[],"created_at":"2024-08-04T00:01:53.574Z","updated_at":"2025-05-13T13:32:45.029Z","avatar_url":"https://github.com/inturn.png","language":"JavaScript","funding_links":[],"categories":["CSS in JS"],"sub_categories":["Editor's Draft :black_nib:"],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://inturn.github.io/classy/\"\u003e\n    \u003cimg alt=\"Classy logo\" src=\"https://inturn.github.io/classy/dist/classy-logo-color.svg\" height=\"150\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://badge.fury.io/js/react-classy\"\u003e\n    \u003cimg alt=\"npm version\" src=\"https://badge.fury.io/js/react-classy.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca\u003e\n    \u003cimg alt=\"npm downloads\" src=\"http://img.shields.io/npm/dm/react-classy.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://travis-ci.org/inturn/classy\"\u003e\n    \u003cimg alt=\"build status\" src=\"https://travis-ci.org/inturn/classy.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://david-dm.org/inturn/classy\"\u003e\n    \u003cimg alt=\"dependency status\" src=\"https://david-dm.org/inturn/classy.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://david-dm.org/inturn/classy#info=devDependencies\"\u003e\n    \u003cimg alt=\"devdependency status\" src=\"https://david-dm.org/inturn/classy/dev-status.svg\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cbr /\u003e\n\n### Table of Contents\n\n- [Install](#install)\n- [Getting Started](#getting-started)\n- [Usage](#usage)\n- [API](#api)\n\nInstall\n-------\n\n##### `npm install react-classy`\n\nGetting Started\n---------------\n\nClassy makes styling React components *composable*, *extensible*, and *simple*.\nImplementation requires only 3 steps:\n\n0. Import `react-classy` into your React component module\n0. Decorate your React component class with `@Classy`.\n0. Assign a CSS string to a static `style` prop on your React component class.\n\nThe styles defined on your React component will get automatically injected into\nthe DOM right before your component mounts. Check out some examples of basic\nand advanced usage in the next section.\n\nUsage\n-----\n\n### Basic\n\n```js\nimport React, { Component } from 'react';\n// Import Classy\nimport Classy from 'react-classy';\n\n// Decorate your component\n@Classy\nexport default class Button extends Component {\n  // Add your CSS styles\n  static style = `\n    .button {\n      background: blue;\n    }\n  `\n  render() {\n    return (\n      \u003cbutton className=\"button\"\u003e\n        {this.props.children}\n      \u003c/button\u003e\n    );\n  }\n}\n\n```\n\n### Advanced\n\nClassy is also highly customizable and supports asynchronous style\nrendering, custom middleware, and theming! In the next example, we'll\ndemonstrate all of the aforementioned while creating a button that\nswitches themes when clicked.\n\n```js\nimport React, { Component } from 'react';\n// Import the decorator and utils modules\nimport Classy, { Utils } from 'react-classy';\n// CSS pre-processor\nimport stylus from 'stylus';\n\n@Classy({\n\n  // Makes Classy play nice with react-hot-loader :)\n  hot: true,\n\n  // Logs component css to console\n  debug: true,\n\n  // Will access specified prop to load component styles\n  // instead of default `style` prop\n  styleProp: 'stylus'\n\n})\nexport default class ToggleButton extends Component {\n\n  render() {\n    return \u003cbutton {...this.props} /\u003e;\n  }\n\n  static defaultProps = {\n    className: 'toggle-button toggle-button--default',\n    children: 'Touch Me!',\n\n    // Method that switches the component's theme.\n    // Will toggle from 'light' to 'dark' and vice versa.\n    onClick: function switchTheme(e) {\n      let { name } = ToggleButton;\n      let theme = Utils.getTheme(name);\n      theme = 'dark' === theme ? 'light' : 'dark';\n      Utils.setTheme(name, theme);\n    }\n\n  }\n\n  // Let's define our themes as a static.\n  // This makes it easy for others to modify a component's theme(s)\n  // via class extension.\n  static theme = {\n    light: {\n      textColor: '#a24bcf',\n      background: 'transparent',\n      borderRadius: '30px'\n    },\n    dark: {\n      textColor: '#fff',\n      background: '#4b79cf',\n      borderRadius: '4px'\n    }\n  }\n\n  // Instead of a hard-coding your CSS,\n  // you can assign a method that returns Promise that fulfills a CSS string.\n  // Our default theme is set via rest param.\n  static stylus(theme=ToggleButton.theme.light) {\n    let styl = `\n\n    .toggle-button\n\n      \u0026--default\n        color: convert($theme.textColor)\n        background: convert($theme.background)\n        border: 1px solid convert($theme.textColor)\n        border-radius: convert($theme.borderRadius)\n        outline: none\n        padding: 20px\n        font-size: 18px\n        font-family: 'Helvetica Neue', helvetica, sans-serif\n        transition: transform .3s ease\n\n        \u0026:hover\n          cursor: pointer\n\n        \u0026:focus\n          transform: translateY(4px)\n\n    `;\n    // Finally, let's use our Stylus middleware to render actual CSS\n    // and return it with a Promise\n    return new Promise((yep, nope) =\u003e stylus(styl.trim())\n      .define('$theme', theme, true)\n      .render((err, css) =\u003e err ? nope(err) : yep(css))\n    );\n  }\n\n}\n```\n\n[Decorator](#decorator) options and [utility](#utils) methods are comprehensively documented in the next\nsection.\n\n\nAPI\n---\n\n### Decorator\n\n#### @Classy([options])\n\nA class decorator will automatically inject styles into the DOM before your `ReactComponent` instance mounts.\n\nExample:\n\n```js\n// ES2016\n@Classy\nexport default class MyComponent extends React.Component { ... }\n\n// ES2015\nclass MyComponent extends React.Component { ... }\nexport default Classy(MyComponent);\n\n// ES5\nvar MyComponent = React.createClass({ ... });\nmodule.exports = Classy(MyComponent);\n```\n\n##### options\n\nType: `Object`\n\nDefault: see below\n\nAn object that allows you to customize your Classy component settings.\nAll settings are optional. See defaults below.\n\n##### options.debug\n\nType: `Boolean`\n\nDefault: `false`\n\nLogs rendered cssText to debug console whens component styles are updated\n\n##### options.hot\n\nType: `Boolean`\n\nDefault: `false`\n\nApplies two effects:\n\n* Replaces internal ref to the component if it gets hot-loaded\n* Component never uses cached cssText\n\n##### options.styleProp\n\nType: `String`\n\nDefault: `style`\n\nComponent prop to access for getting styles\n\n##### options.themeProp\n\nType: `String`\n\nDefault: `themes`\n\nComponent prop to access for getting themes\n\n##### options.alias\n\nType: `String`\n\nDefault: `\u003cReactComponent\u003e.name`\n\nKey under which Classy identifies your component.\nIf not specified, your ReactComponent's `constructor.name` will be used.\n\n##### options.elemId\n\nType: `String`\n\nDefault: `alias + '_' + Utils.genHash()`\n\nExample: `MyButton_fxhhf`\n\nID prop for component `\u003cstyle\u003e` tag. Uses `options.alias` plus a 5 character hash (separated by an underscore) to prevent unintentional id attribute collisions.\n\n##### options.elemProps\n\nType: `String`\n\nDefault: `{ type: 'text/css' }`\n\nOther props to apply to component `\u003cstyle\u003e` tag\n\n##### options.appendTo\n\nType: `String`\n\nDefault: `head`\n\nElement to append component `\u003cstyle\u003e` tag to\n\n\u003chr /\u003e\n\n### Utils\n\n#### #setTheme(alias [, theme, force=false])\n\nUpdates component styles with specified theme object\n\n##### alias\n\nType: `String`\n\nKey under which Classy identifies your component. (See [decorator options](#optionsalias))\n\n##### theme\n\nType: `String`\n\nComponent theme to use\n\n##### force\n\nType: `Boolean`\n\nDefault: `false`\n\nRe-render theme if already applied\n\n#### #getTheme(alias)\n\nReturn: `Object`\n\nGets the current theme applied to a component\n(Convenience method for `State.getComponentState(...).currentTheme`).\n\n##### alias\n\nType: `String`\n\nKey under which Classy identifies your component. (See [decorator options](#optionsalias))\n\n#### #updateStyle(alias)\n\nReturn: `Promise`\n\nCreates a component's `\u003cstyle\u003e` tag and/or updates its cssText.\n\n##### alias\n\nType: `String`\n\nKey under which Classy identifies your component. (See [decorator options](#optionsalias))\n\n#### #removeStyle(alias)\n\nReturn: `Promise`\n\nRemoves a component's `\u003cstyle\u003e` tag.\n\n##### alias\n\nType: `String`\n\nKey under which Classy identifies your component. (See [decorator options](#optionsalias))\n\n#### #getComponentState(alias)\n\nReturn: `Object`\n\nGets a component's Classy state object.\n\n##### alias\n\nType: `String`\n\nKey under which Classy identifies your component. (See [decorator options](#optionsalias))\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finturn%2Fclassy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finturn%2Fclassy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finturn%2Fclassy/lists"}