Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    react-nexus-stylepublic

    React Nexus Style

    Ultra-light utility to help writing CSS inside your JS React components declarations. It simply scans a list of React components class definitions (in JS) and translates them into an actual CSS string.

    Inside the class definition you have access to the full power of JS, which means you won't ever need a CSS preprocessor again.

    Best friends with gulp-react-nexus-style.

    NOTE: This package is included in the React Nexus Starterkit but is it NOT tied to the React Nexus framework in any way. It is perfectly fine to use it without using React Nexus.

    Usage (without gulp)

    Declare styles in the statics of your component class:

    var MyComponent = React.createClass({
      statics: {
        styles: {
          '.MyComponent .MyComponent-item': {
            // you can put build-time calculations here 
            fontSize: 0.8 * readFontSizeFromConfig() + 'px',
          }
        }
      },
     
      render: function() {
        return <div className='MyComponent'>
          <div className='MyComponent-item'>This is smaller that usual.</div>
        </div>;
      },
    });

    Then pass one or more class definition(s) to extractAllStyles:

    require('react-nexus-style').extractAllStyles([MyComponent])

    Assuming that readFontSizeFromConfig() returns 10, then this outputs the string:

    /* @react-nexus-style MyComponent */
    .MyComponent .MyComponent-item {
      font-size: 8px;
    }

    Usage (with gulp)

    See gulp-react-nexus-style.

    Keywords

    none

    install

    npm i react-nexus-style

    Downloadsweekly downloads

    1

    version

    1.1.0

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar