Converts css strings to fit in a ReactJS project's js style objects.
This tool may come in handy whenever you want to take existing
.less definitions, and move them into ReactJS components, in an inline
For example, you have this
You want to turn it into this
moduleexports =specialText:fontSize: '24px'letterSpacing: 0lineHeight: '32px'multipleStatements: 'on-same'lineWill: 'work-just-fine';
...which you can use for inline styling a ReactJS component:
var style = ;moduleexports = React;
How to download
$ npm install -g css2reactjs-inline-style
How to use
Start the converter and leave it running:
$ css2reactjs-inline-style # Usually, you can simply type css2r and# then hit TAB to autocomplete that long word.
Then copy the internal parts of the css you wish to convert:
font-size: 24px; letter-spacing: 0; line-height: 32px; multiple-statements: on-same; line-will: work-just-fine;
Paste it into the tool, and it will spit this out for you:
fontSize: '24px', letterSpacing: 0, lineHeight: '32px', multipleStatements: 'on-same', lineWill: 'work-just-fine'
Copy it, and paste into your js file in the correct place. It will fit perfectly inside a JS object literal (