React-styled NPM

react-styled

:warning: Highly experimental tool for applying styles to React components.

TODO:

Proper CSS matching
Pass props to selector matching
Pass state to selector matching
Implement className generation in cases when :before is used
Implement <style> tag generation for custom classes

Usage

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!./index.css'));

var Button = React.createClass({
	getInitialState: function() {
		return {pressed: 'no'};
	},

	onMouseUp: function () {
		this.setState({pressed: 'no'});
	},

	onMouseLeave: function () {
		this.setState({pressed: 'no'});
	},

	onMouseDown: function () {
		this.setState({pressed: 'yes'});
	},

	render: styled(function () {
		var button = (
			<button>
				<span>{this.props.children}</span>
			</button>
		);

		var link = (
			<a>
				<span>{this.props.children}</span>
			</a>
		);

		return this.props.url ? button : link;
	})
});