TODO:
- Proper CSS matching
- Pass props to selector matching
- Pass state to selector matching
- Implement className generation in cases when
:beforeis used - Implement
<style>tag generation for custom classes
index.css:
button {
border: 1px solid #eee;
}
button span {
color: blue;
}
button[pressed="yes"] span {
color: red;
}index.jsx:
var React = require('react');
var Styled = require('react-styled');
// Somehow get index.css contents, webpack for example:
var styled = new Styled(require('css-loader!./index.css').toString());
var Button = React.createClass({
getInitialState: function() {
return {hovered: 'no'};
},
mouseLeave: function () {
this.setState({hovered: 'no'});
},
mouseEnter: function () {
this.setState({hovered: 'yes'});
},
render: styled(function () {
return (
<button onMouseEnter={this.mouseEnter} onMouseLeave={this.mouseLeave}>
<span>
{this.props.children}
</span>
</button>
);
})
});Magic.
Returns decorator Function for wrapping render method of React component.
Not so much yet.
MIT © Vsevolod Strukchinsky
