Permalink
Browse files

v1.0.0

  • Loading branch information...
markdalgleish committed Jul 7, 2015
0 parents commit 24694dba22539c977c48aef207ae9b1cf3d872b2
Showing with 177 additions and 0 deletions.
  1. +13 −0 .editorconfig
  2. +2 −0 .gitignore
  3. +1 −0 .npmignore
  4. +121 −0 README.md
  5. +27 −0 package.json
  6. +13 −0 src/index.js
@@ -0,0 +1,13 @@
# editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
@@ -0,0 +1,2 @@
node_modules
dist
@@ -0,0 +1 @@
src
121 README.md
@@ -0,0 +1,121 @@
# react-themeable
Utility for making React components easily themeable.
**This project is still experimental, so feedback from component authors would be greatly appreciated!**
## Why?
The 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?
With react-themeable, you can support custom themes provided by [CSS Modules](https://github.com/css-modules/css-modules), [Radium](http://projects.formidablelabs.com/radium/), [React Style](https://github.com/js-next/react-style), or even plain old style objects as easily as this:
```js
<MyComponent theme={theme} />
```
## Install
`npm install --save react-themeable`
## Usage
`react-themeable` exposes just a single function.
This 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 classes/style names.
This helper function detects whether a theme is class or style based, and creates the appropriate attributes for you.
For example:
```js
import React, { Component } from 'react';
import themeable from 'react-themeable';
class MyComponent extends Component {
render() {
const theme = themeable(this.props.theme);
return (
<div {...theme(1, 'root')}>
<div {...theme(2, 'foo', 'bar')}>Foo Bar</div>
<div {...theme(3, 'baz')}>Baz</div>
</div>
);
}
}
```
A theme can now be passed to your component like so:
### CSS Modules
```css
.foo { color: red; }
.foo:hover { color: green; }
.bar { color: blue; }
```
```js
import theme from './MyComponentTheme.css';
...
<MyComponent theme={theme} />
```
### Radium
```js
import Radium from 'radium';
const theme = {
foo: {
color: 'red',
':hover': {
color: 'green'
}
},
bar: {
color: 'blue'
}
};
const ThemedMyComponent = Radium(MyComponent);
...
<ThemedMyComponent theme={theme} />
```
### React Style
```js
import StyleSheet from 'react-style';
const theme = StyleSheet.create({
foo: {
color: 'red'
},
bar: {
color: 'blue'
}
});
...
<MyComponent theme={theme} />
```
### Plain style objects
```js
const theme = {
foo: {
color: 'red'
},
bar: {
color: 'blue'
}
};
...
<MyComponent theme={theme} />
```
## License
[MIT](http://markdalgleish.mit-license.org)
@@ -0,0 +1,27 @@
{
"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": "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"
}
}
@@ -0,0 +1,13 @@
import assign from 'object-assign';
const truthy = x => x;
export default theme => (key, ...names) => {
const styles = names
.map(name => theme[name])
.filter(truthy);
return typeof styles[0] === 'string' ?
{ key, className: styles.join(' ') } :
{ key, style: assign({}, ...styles) };
};

0 comments on commit 24694db

Please sign in to comment.