Never Play Matchmaker

    react-style-marker

    0.1.0 • Public • Published

    React-style-marker

    React-style-marker is trying to manage inline style on React elements in a different way.

    With React-style-marker, inline style will be converted into variables and expressions and you can reuse these variables in the same rule in this system.

    • bottom up and composable
    • readable and reusable
    • '+', '-', '*', '/', '=', '(', ')' instead of object operations

    Installation

    npm install react-style-marker
    

    Usage

    var Marker = require('react-style-marker');
    var I = Marker.insert;
    var T = Marker.trans;
    

    Trans

    Trans translates the react-style-marker string to react inline style object.

    console.log(T("width(100)+height(100)+display('block'))")
    

    The output is:

    { width: 100, height: 100, display: 'block' }
    
    
    <div style={T("width(100)+height(100)+display('block')")} >
    </div>
    

    Which is equal to:

    <div style={{width:100,height:100,display:block}} >
    </div>
    

    If it has an assign expression, the left side will be assigned value which is the result of the right side expression.

    T("myDiv=display('block') + width(100) + height(100)")
    

    Then you can simply use:

    <div style={T('myDiv')}>
    </div>
    

    Trans returns the result of the first expression:

    console.log(T("myDiv=display('block') + width(100) + height(100)"))
    console.log(T("myDiv"));
    

    The output is both:

    { display: 'block', width: 100, height: 100 }
    

    Using ';' or '\n' to seperate Multiple expression:

    T("myDiv1=display('block') + width(100) + height(100);myDiv2=myDiv1");
    

    Insert

    Parameters: alias, key, value, priority, state

    I('myBg', 'background', 'grey');
    

    Then you define style {myBg:background('grey')}

    <div style={T('myBg')}>
    </div>
    

    You can also define style with state:

    I('myBgHover, 'background', 'red', 1, 'hover');
    

    Using '*' to achive composing style with states:

    <button
        style={T("myBg*myBgHover", this.state.hover)}
        onMouseEnter={this.handleMouseEnter}
        onMouseLeave={this.handleMouseLeave} >
    </button>
    
    handleMouseEnter() {
      this.setState({
        hover: 'hover'
      });
    },
    handleMouseLeave() {
      this.setState({
        hover: null
      });
    },
    

    Examples with React

    var Marker = require('react-style-marker');
    var T = Marker.trans;
    
    // you can use custom variable cm as the combination
    // cm = Object.assign({}, {display:'absolute'}, {left:0} ...)
    
    T("cm=display('absolute')+left(0)+right(0)+top(0)+bottom(0)+margin('auto auto auto auto')");
    
    var Demo = React.createClass({
      render: function() {
        // Trans covert expression to react styles
        // And can use variables which you defined with Trans earlier(variable cm)
        return (
          <div>
            <div style={T("height(500)+relative+background('orange')")} >
              <div style={T("cm+width(50)+height(100)+background('green')")}>
              </div>
            </div>
          </div>
        )
      }
    });
    
    React.render(<Demo />, document.getElementById('example'));
    

    Stateful styles:

    var Marker = require('react-style-marker');var I = Marker.insert;
    var T = Marker.trans;
    
    // Alias for a certain style
    I('bg', 'background', 'grey');
    I('bgHover', 'background', 'pink', 1, 'hover');
    
    var Demo = React.createClass({
      getInitialState() {
        return {
          hover: null
        };
      },
      handleMouseEnter() {
        this.setState({
          hover: 'hover'
        });
      },
      handleMouseLeave() {
        this.setState({
          hover: null
        });
      },
      // '*' make multiple state combined in a single variable
      // Trans has an optional sencond paramter state
      // Which can filter style value with certain state
      render: function() {
        return (
         <div>
           <div onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} style={T("width(100)+height(100)+bg*bgHover", this.state.hover)}>
           </div>
         </div>
        )
      }
    });
    React.render(<Demo />, document.getElementById('example'));
    

    Live Demo

    Simple hover

    Align center middle with absolute block

    Install

    npm i react-style-marker

    DownloadsWeekly Downloads

    3

    Version

    0.1.0

    License

    MIT

    Last publish

    Collaborators

    • w-y