babel-plugin-react-style-string

Adds support style as strings instead of object declaration in react components

For what

To quickly preview changes without creating objects and copy the style as it is from browsers devtool

function Component() {
    return <div style="border-color:red;height:100px"/>
}

instead of this

function Component() {
    return <div style={{ borderColor: 'red', height: '100px'}} />
}

Install

yarn add babel-plugin-react-style-string

npm install babel-plugin-react-style-string

babel.config.js or .babelrc

module.exports = { plugins: ['babel-plugin-react-style-string'] };

NextJS integration