{"id":13518885,"url":"https://github.com/casesandberg/reactcss","last_synced_at":"2025-05-14T06:13:05.734Z","repository":{"id":34181215,"uuid":"38031768","full_name":"casesandberg/reactcss","owner":"casesandberg","description":":lipstick: Inline Styles in JS","archived":false,"fork":false,"pushed_at":"2020-08-14T15:49:07.000Z","size":3537,"stargazers_count":1591,"open_issues_count":7,"forks_count":75,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-05-11T01:21:12.264Z","etag":null,"topics":["inline-styles","react","react-library"],"latest_commit_sha":null,"homepage":"http://reactcss.com/","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/casesandberg.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-06-25T06:20:52.000Z","updated_at":"2025-04-28T04:06:08.000Z","dependencies_parsed_at":"2022-08-08T00:01:51.201Z","dependency_job_id":null,"html_url":"https://github.com/casesandberg/reactcss","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casesandberg%2Freactcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casesandberg%2Freactcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casesandberg%2Freactcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casesandberg%2Freactcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/casesandberg","download_url":"https://codeload.github.com/casesandberg/reactcss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254080941,"owners_count":22011524,"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":["inline-styles","react","react-library"],"created_at":"2024-08-01T05:01:50.361Z","updated_at":"2025-05-14T06:13:05.679Z","avatar_url":"https://github.com/casesandberg.png","language":"JavaScript","readme":"# [ReactCSS](http://reactcss.com/)\n\n[![Build Status][travis-svg]][travis-url]\n[![dependency status][deps-svg]][deps-url]\n[![dev dependency status][dev-deps-svg]][dev-deps-url]\n[![License][license-image]][license-url]\n[![Downloads][downloads-image]][downloads-url]\n\n## Inline Styles in JS with support for [React](http://reactcss.com/#react), [React Native](http://reactcss.com/#react-native), [Autoprefixing](http://reactcss.com/#autoprefixing), [Hover](http://reactcss.com/#hover), [Pseudo-Elements](http://reactcss.com/#pseudo-elements) \u0026 [Media Queries](http://reactcss.com/#media-queries)\n\n## Install\n\n```\nnpm install reactcss --save\n```\n\n## Style Object\n\nDefine a default styles for your elements:\n```javascript\nimport reactCSS from 'reactcss'\n\nconst styles = reactCSS({\n  'default': {\n    card: {\n      background: this.props.background,\n      boxShadow: '0 2px 4px rgba(0,0,0,.15)',\n    },\n  },\n})\n```\n\nPass style definitions via inline styles:\n```javascript\n\u003cdiv style={ styles.card } /\u003e\n```\n\n## Activating Classes\n\nActivate additional classes by passing down objects as additional parameters to `reactCSS`:\n```javascript\nconst styles = reactCSS({\n  'default': {\n    card: {\n      background: '#fff',\n      boxShadow: '0 2px 4px rgba(0,0,0,.15)',\n    },\n  },\n  'zIndex-2': {\n    card: {\n      boxShadow: '0 4px 8px rgba(0,0,0,.15)',\n    },\n  },\n}, {\n  'zIndex-2': props.zIndex === 2,\n})\n```\n\n## Documentation\nSee the [Full Documentation](http://reactcss.com)\n\n## Examples\n\nExamples and projects built with reactCSS:\n\n[Felony](https://github.com/henryboldi/felony) - Next Level PGP Desktop App\n[React Color](https://github.com/casesandberg/react-color) - Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter \u0026 more\n[Buffer App Components](https://www.npmjs.com/package/@bufferapp/components) - A shared set of UI Components\n[React Reactions](https://github.com/casesandberg/react-reactions) - Use Reactions from Slack, Facebook, Pokemon, Github and Youtube\n\n\n[travis-svg]: https://travis-ci.org/casesandberg/reactcss.svg\n[travis-url]: https://travis-ci.org/casesandberg/reactcss\n[deps-svg]: https://david-dm.org/casesandberg/reactcss.svg\n[deps-url]: https://david-dm.org/casesandberg/reactcss\n[dev-deps-svg]: https://david-dm.org/casesandberg/reactcss/dev-status.svg\n[dev-deps-url]: https://david-dm.org/casesandberg/reactcss#info=devDependencies\n[npm-badge-png]: https://nodei.co/npm/reactcss.png?downloads=true\u0026stars=true\n[license-image]: http://img.shields.io/npm/l/reactcss.svg\n[license-url]: LICENSE\n[downloads-image]: http://img.shields.io/npm/dm/reactcss.svg\n[downloads-url]: http://npm-stat.com/charts.html?package=reactcss\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcasesandberg%2Freactcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcasesandberg%2Freactcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcasesandberg%2Freactcss/lists"}