babel-plugin-transform-hoist-jsx-style

Babel plugin to hoist pure object literals in the style prop on JSX elements.

Example

In

function Foo() {
    return <div style={{ display: 'inline-block' }}>Foo</div>
}

Out

var _ref = {
    display: 'inline-block'
};
 
function Foo() {
    return <div style={_ref}>Foo</div>
}

Installation

npm install --save-dev babel-plugin-transform-hoist-jsx-style

Usage

.babelrc

{
    "plugins": ["transform-hoist-jsx-style"]
}

Why

Similar reasons to transform-react-constant-elements. The difference being this doesn't prevent calls to react.createElement - this just prevents unnecessary allocations each render(). This is still experimental, and profiling has not been done yet to see if this has any reasonable perf impact.