Nth Permutation Mathematics

    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

    Install

    npm i react-styled

    DownloadsWeekly Downloads

    11

    Version

    0.0.5

    License

    MIT

    Last publish

    Collaborators

    • floatdrop