Home

Awesome

react-transform-style

What?

This is a react-transform that makes React components support className and style props, even if they don't explicity apply them to the outermost element in their render function.

Why?

Without this, you'd need to make each React component explicity consume className and style and apply them to the outermost component. With this transform it is unnecessary (though this transform will play nicely with components that already do something like this).

Example

With react-transform-style
import React, { Component } from 'react';

class HelloWorld extends Component {
  render() {
    return <div className="hello-world">Hello World</div>;
  }
}

<HelloWorld className="custom-class" style={{ color: 'red' }}/>

generates the following

<div style="color:red;" class="custom-class hello-world">Hello World</div>
Without react-transform-style
import React, { Component } from 'react';

class HelloWorld extends Component {
  render() {
    return (
      <div
        className={classNames(this.props.className, 'hello-world')}
        style={this.props.style}
      >
        Hello World
      </div>
    );
  }
}

<HelloWorld className="custom-class" style={{ color: 'red' }}/>

still generates the following (same as above)

<div style="color:red;" class="custom-class hello-world">Hello World</div>

Usage

.babelrc

{
  "presets": [
    "react"
  ],
  "plugins": [
    ["react-transform", {
      "transforms": [{
        "transform": "react-transform-style"
      }]
    }]
  ]
}

Caveats