react-styled

0.0.5 • Public • Published

react-styled Build Status

⚠️ 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;
    })
});

How does it works

Magic.

API

Styled(css)

Returns decorator Function for wrapping render method of React component.

Not so much yet.

License

MIT © Vsevolod Strukchinsky

Readme

Keywords

Package Sidebar

Install

npm i react-styled

Weekly Downloads

2

Version

0.0.5

License

MIT

Last publish

Collaborators

  • floatdrop