https://github.com/hugojosefson/css2reactjs-inline-style

Converts css strings to fit in a ReactJS project's js style objects.
https://github.com/hugojosefson/css2reactjs-inline-style

Last synced: 29 days ago
JSON representation

Converts css strings to fit in a ReactJS project's js style objects.

• Host: GitHub
• URL: https://github.com/hugojosefson/css2reactjs-inline-style
• Owner: hugojosefson
• Created: 2015-03-12T06:49:50.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2022-03-24T07:55:50.000Z (almost 3 years ago)
• Last Synced: 2024-11-09T05:20:14.684Z (about 2 months ago)
• Language: JavaScript
• Homepage:
• Size: 103 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# css2reactjs-inline-style

[![Build Status](https://travis-ci.org/hugojosefson/css2reactjs-inline-style.svg?branch=master)](https://travis-ci.org/hugojosefson/css2reactjs-inline-style)

[![npm page](https://img.shields.io/npm/v/css2reactjs-inline-style.svg)](https://npmjs.com/package/css2reactjs-inline-style)

[![License MIT](https://img.shields.io/npm/l/css2reactjs-inline-style.svg)](https://tldrlegal.com/license/mit-license)

[![SemVer 2.0.0](https://img.shields.io/badge/SemVer-2.0.0-lightgrey.svg)](http://semver.org/spec/v2.0.0.html)

_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 `.css` or `.less` definitions, and move them into ReactJS components, in an inline `.js` style.

## Example use-case

For example, you have this `style.css` file:

```css

.special-text {

  font-size: 24px;

  letter-spacing: 0;

  line-height: 32px;

  multiple-statements: on-same; line-will: work-just-fine;

}

```

You want to turn it into this `style.js` file:

```js

module.exports = {

    specialText: {

        fontSize: '24px',

        letterSpacing: 0,

        lineHeight: '32px',

        multipleStatements: 'on-same',

        lineWill: 'work-just-fine'

    }

};

```

...which you can use for inline styling a ReactJS component:

```jsx

var style = require('./style');

module.exports = React.createClass({

    render: function() {

        return 
This very special text.
;

    }

});

```


## How to download

```bash

$ npm install -g css2reactjs-inline-style

```

## How to use

Start the converter and leave it running:

```bash

$ 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 (`{}`).

Enjoy!