{"_id":"react-themeable","_rev":"3143988","name":"react-themeable","description":"Utility for making React components easily themeable","dist-tags":{"latest":"1.1.0"},"maintainers":[{"name":"markdalgleish","email":""}],"time":{"modified":"2023-11-27T06:57:40.000Z","created":"2015-07-07T21:58:53.771Z","1.1.0":"2016-05-20T13:59:16.882Z","1.0.1":"2015-07-07T22:10:33.027Z","1.0.0":"2015-07-07T21:58:53.771Z"},"users":{"danielbayley":true,"rdricco":true},"author":{"name":"Mark Dalgleish"},"repository":{"type":"git","url":"git+https://github.com/markdalgleish/react-themeable.git"},"versions":{"1.1.0":{"name":"react-themeable","version":"1.1.0","description":"Utility for making React components easily themeable","main":"dist/index.js","scripts":{"test":"babel-istanbul cover _mocha -- --compilers js:babel/register && babel-istanbul check-coverage --branches 100","coverage":"cat ./coverage/coverage.json | ./node_modules/codecov.io/bin/codecov.io.js","build":"babel src -d dist","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/markdalgleish/react-themeable.git"},"author":{"name":"Mark Dalgleish"},"license":"MIT","bugs":{"url":"https://github.com/markdalgleish/react-themeable/issues"},"homepage":"https://github.com/markdalgleish/react-themeable#readme","dependencies":{"object-assign":"^3.0.0"},"devDependencies":{"babel":"^5.6.14","babel-istanbul":"^0.2.10","chai":"^3.0.0","codecov.io":"^0.1.5","mocha":"^2.2.5"},"gitHead":"0f15ce521684303b00e749148c5947a03093c522","_id":"react-themeable@1.1.0","_shasum":"7d4466dd9b2b5fa75058727825e9f152ba379a0e","_from":".","_npmVersion":"3.3.12","_nodeVersion":"5.2.0","_npmUser":{"name":"markdalgleish","email":"mark.john.dalgleish@gmail.com"},"dist":{"shasum":"7d4466dd9b2b5fa75058727825e9f152ba379a0e","size":17947,"noattachment":false,"key":"/react-themeable/-/react-themeable-1.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-themeable/download/react-themeable-1.1.0.tgz"},"maintainers":[{"name":"markdalgleish","email":""}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-themeable-1.1.0.tgz_1463752754401_0.7947939008008689"},"directories":{},"publish_time":1463752756882,"_hasShrinkwrap":false,"_cnpm_publish_time":1463752756882,"_cnpmcore_publish_time":"2021-12-15T16:33:19.170Z"},"1.0.1":{"name":"react-themeable","version":"1.0.1","description":"Utility for making React components easily themeable","main":"dist/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"babel src -d dist","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/markdalgleish/react-themeable.git"},"author":{"name":"Mark Dalgleish"},"license":"MIT","bugs":{"url":"https://github.com/markdalgleish/react-themeable/issues"},"homepage":"https://github.com/markdalgleish/react-themeable#readme","dependencies":{"object-assign":"^3.0.0"},"devDependencies":{"babel":"^5.6.14"},"gitHead":"1d44ca8eab866800fbb2166e994009b6866e3c96","_id":"react-themeable@1.0.1","_shasum":"17be74f0b32f118f254039ae362f3a40e7252471","_from":".","_npmVersion":"2.11.2","_nodeVersion":"0.10.36","_npmUser":{"name":"markdalgleish","email":"mark.john.dalgleish@gmail.com"},"maintainers":[{"name":"markdalgleish","email":""}],"dist":{"shasum":"17be74f0b32f118f254039ae362f3a40e7252471","size":2135,"noattachment":false,"key":"/react-themeable/-/react-themeable-1.0.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-themeable/download/react-themeable-1.0.1.tgz"},"directories":{},"publish_time":1436307033027,"_hasShrinkwrap":false,"_cnpm_publish_time":1436307033027,"_cnpmcore_publish_time":"2021-12-15T16:33:19.420Z"},"1.0.0":{"name":"react-themeable","version":"1.0.0","description":"Utility for making React components easily themeable","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"babel src -d dist","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/markdalgleish/react-themeable.git"},"author":{"name":"Mark Dalgleish"},"license":"MIT","bugs":{"url":"https://github.com/markdalgleish/react-themeable/issues"},"homepage":"https://github.com/markdalgleish/react-themeable#readme","dependencies":{"object-assign":"^3.0.0"},"devDependencies":{"babel":"^5.6.14"},"gitHead":"24694dba22539c977c48aef207ae9b1cf3d872b2","_id":"react-themeable@1.0.0","_shasum":"452163532e4bafb5ba135d3256b70b5a599b4abd","_from":".","_npmVersion":"2.11.2","_nodeVersion":"0.10.36","_npmUser":{"name":"markdalgleish","email":"mark.john.dalgleish@gmail.com"},"maintainers":[{"name":"markdalgleish","email":""}],"dist":{"shasum":"452163532e4bafb5ba135d3256b70b5a599b4abd","size":2132,"noattachment":false,"key":"/react-themeable/-/react-themeable-1.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-themeable/download/react-themeable-1.0.0.tgz"},"directories":{},"publish_time":1436306333771,"_hasShrinkwrap":false,"_cnpm_publish_time":1436306333771,"_cnpmcore_publish_time":"2021-12-15T16:33:19.651Z"}},"readme":"[![Build Status](https://img.shields.io/travis/markdalgleish/react-themeable/master.svg?style=flat-square)](http://travis-ci.org/markdalgleish/react-themeable) [![Coverage](https://img.shields.io/codecov/c/github/markdalgleish/react-themeable/master.svg?style=flat-square)](https://codecov.io/github/markdalgleish/react-themeable) [![npm](https://img.shields.io/npm/v/react-themeable.svg?style=flat-square)](https://www.npmjs.com/package/react-themeable)\n\n# react-themeable\n\nUtility for making React components easily themeable.\n\n**This project is still experimental, so feedback from component authors would be greatly appreciated!**\n\n## Why?\n\nThe React community is highly fragmented when it comes to styling. How do we write components that can happily co-exist with all of these competing approaches?\n\nWith react-themeable, you can support custom themes provided by [CSS Modules](https://github.com/css-modules/css-modules), [Radium](http://projects.formidablelabs.com/radium/), [Aphrodite](https://github.com/Khan/aphrodite), [React Style](https://github.com/js-next/react-style), [JSS](https://github.com/jsstyles/jss), global CSS or inline styles as easily as this:\n\n```js\n<MyComponent theme={theme} />\n```\n\n## Install\n\n`npm install --save react-themeable`\n\n## Usage\n\n`react-themeable` exposes just a single function.\n\nThis function is designed to accept a `theme` prop inside of your `render` method. This then returns a small helper function that accepts a key and a series of style names.\n\n```js\nconst theme = themeable(this.props.theme);\n...\n<div {...theme(key, ...styleNames)} />\n```\n\n*Note: A unique key for each themed element is required for [Radium](http://projects.formidablelabs.com/radium/) to work correctly.*\n\nThis helper function detects whether a theme is class or style based, and creates the appropriate attributes for you.\n\nFor example:\n\n```js\nimport React, { Component } from 'react';\nimport themeable from 'react-themeable';\n\nclass MyComponent extends Component {\n  render() {\n    const theme = themeable(this.props.theme);\n\n    return (\n      <div {...theme(1, 'root')}>\n        <div {...theme(2, 'foo', 'bar')}>Foo Bar</div>\n        <div {...theme(3, 'baz')}>Baz</div>\n      </div>\n    );\n  }\n}\n```\n\nA theme can now be passed to your component like so:\n\n### CSS Modules\n\n```css\n.foo { color: red; }\n.foo:hover { color: green; }\n.bar { color: blue; }\n```\n\n```js\nimport theme from './MyComponentTheme.css';\n...\n<MyComponent theme={theme} />\n```\n\n### Radium\n\n```js\nimport Radium from 'radium';\n\nconst theme = {\n  foo: {\n    color: 'red',\n    ':hover': {\n      color: 'green'\n    }\n  },\n  bar: {\n    color: 'blue'\n  }\n};\n\nconst ThemedMyComponent = Radium(MyComponent);\n...\n<ThemedMyComponent theme={theme} />\n```\n\n### Aphrodite\n\n```js\nimport { StyleSheet, css } from 'aphrodite';\n\nconst theme = StyleSheet.create({\n  foo: {\n    color: 'red',\n    ':hover': {\n      color: 'green'\n    }\n  },\n  bar: {\n    color: 'blue'\n  }\n});\n...\n<MyComponent theme={[ theme, css ]} />\n```\n\n### React Style\n\n```js\nimport StyleSheet from 'react-style';\n\nconst theme = StyleSheet.create({\n  foo: {\n    color: 'red'\n  },\n  bar: {\n    color: 'blue'\n  }\n});\n...\n<MyComponent theme={theme} />\n```\n\n### JSS\n\n```js\nimport jss from 'jss';\n\nconst sheet = jss.createStyleSheet({\n  foo: {\n    color: 'red'\n  },\n  bar: {\n    color: 'blue'\n  }\n}).attach();\n...\n<MyComponent theme={sheet.classes} />\n```\n\n### Global CSS\n\n```css\n.MyComponent__foo { color: red; }\n.MyComponent__foo:hover { color: green; }\n.MyComponent__bar { color: blue; }\n```\n\n```js\nconst theme = {\n  foo: 'MyComponent__foo',\n  bar: 'MyComponent__bar'\n};\n...\n<MyComponent theme={theme} />\n```\n\n### Inline styles\n\n```js\nconst theme = {\n  foo: {\n    color: 'red'\n  },\n  bar: {\n    color: 'blue'\n  }\n};\n...\n<MyComponent theme={theme} />\n```\n\n## License\n\n[MIT](http://markdalgleish.mit-license.org)\n","_attachments":{},"homepage":"https://github.com/markdalgleish/react-themeable#readme","bugs":{"url":"https://github.com/markdalgleish/react-themeable/issues"},"license":"MIT"}