0.21.0 • Public • Published

This is in beta, and has not yet reached a stable realease

The API may be changed at any point until 1.0 is reached

Build Status Code Climate Test Coverage Download Count

Unit tests work in IE9+ however, this library has not been battle tested, and probably isn't ready for production unless you want to live on the edge. If you do implement it somewhere, I will list it here as an example. PR or message me.


Join the chat at

Style react components by generating a style tag for all react components in a sass-like fassion.


This project was started as an alternative to react style because of it's inabilty to reasonably handle css states. Instead we are reacting in style, allowing you to define how your component should look, and creating a style tag in the head of the page which defines your component, hover states and all.

Breaking changes

as of 0.21.0 Auto prefixer was removed, because it was causing issues and inflated library size.


npm install --save react-in-style

Example Usage

// or include `dist/react-in-style.js`
var ReactInStyle = require('react-in-style');
var style = {
        // & refers to parent selector, similar to SASS
        '&.test': {
            ':hover': {
                background: '#999'
        height: '100px',
        width: '100px',
        display: 'block',
        // Auto converted to kebab case.
        backgroundColor: 'red',
        img: {
            height: '500px',
            &.thumbnail: {
                height: '50px'
        ':hover': {
            'background-color': 'blue'
Pic = React.createClass({
    style: style,
    render: function() {
        return (
            React.createElement('CustomElement', {className:'test'},
                React.createElement('img', {
                    src: '',
 // The second argument is the selector for your element.
 ReactInStyle.add(Pic, 'customelement', {
    queries: ['min-width: 500px', 'max-width: 900px']
// You can also pass in an object directly instead of a class
// ReactInStyle.add(style, 'customelement', {
//     queries: ['min-width: 500px', 'max-width: 900px']
// });
 module.exports = Pic;

The above would put a style tag in the head of the page.

        <style id="react-in-style">
            @media (min-width: 500px) and (max-width: 900px) {
                customelement.test:hover {background: #999}
                customelement {height: '100px';width: '100px';display: 'block';background-color: 'red'}
                customelement img {height: '500px'}
                customelement img.thumbnail {height: '50px'}
                customelement:hover {background-color: 'blue'}


  • Methods
    • add(class, selector, options)
      1. The class with the style object (attached via
      2. The selector for the style.
      3. options (with examples)
          // suppress warnings, which occur when the selector is added twice.
          noWarnings: false, // default
          // Will wrap
          queiries: ['max-width: 900px', 'orientation: landscape' ... ] // example
    • destroy() : Destroys all styles and removes all data related to previous adds.

Running the unit tests

open 'test/runner.html' && gulp test:browser (may need to refresh once after it loads.)


Pull -> branch -> pull request

Try to match the style (tabs/spaces etc) if not I will fix it.

Package Sidebar


npm i react-in-style

Weekly Downloads






Last publish


  • ericwooley