<commit_before># <img alt="Reactive Style" height="60" src="https://s3.amazonaws.com/reactive-style/reactive-style-logo.svg?11263" />
Reactive Style is a component for writing plaintext CSS in JavaScript apps. Use the same
familiar CSS syntax you already know and love -- now inside of your components.

[<img title="Version" src="https://img.shields.io/npm/v/reactive-style.svg?style=flat-square" />](https://www.npmjs.org/package/reactive-style) [<img title="License" src="https://img.shields.io/dub/l/vibe-d.svg?maxAge=2592000?style=flat-square" />](https://github.com/buildbreakdo/reactive-style/blob/master/LICENSE) [<img title="Maintenance Status" src="https://img.shields.io/badge/status-maintained-brightgreen.svg?style=flat-square" />](https://github.com/buildbreakdo/reactive-style/pulse)

| Feature               | Reactive Style | Inline Style |           |
| :-------------------- | :------------: | :----------: | :--------- |
| Nothing&nbsp;new to learn | &#10004;       |              | With Reactive Style, you use the same familiar CSS syntax you already know and love -- now inside of your components. Just wrap your component with Reactive Style and start writing CSS. |
| Fully featured        | &#10004;       |              | There is no abstraction to go through -- Reactive Style is just CSS. Use any CSS feature available. |
| Scoped selectors      | &#10004;       |              | Move your CSS out of the global name space. Reactive Style automatically scopes selectors for you to the component's root element and acts as a polyfill for sub-tree scoping (learn more on [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLStyleElement/scoped)). |
| [Layout styling](#layout-styling) | &#10004;       |              | Style your layout without using an external CSS file. Reactive Style makes keeping all of your CSS in the App component hierarchy easy -- from global layout to component specific styles. |


<p align="right">
    <b><a href="#user-content-more-features">SEE MORE &raquo;</a></b>
</p>

### Installation

Install with npm.

```sh
npm install reactive-style --save
```

Alternatively, if you are not using npm as your package manager the files can be downloaded directly from the [npm content delivery network](https://npmcdn.com/reactive-style/).

### Usage
Reactive Style takes advantage of ES2015 / ES6 specification for Template Literals (previously "template strings") to write plaintext CSS in JavaScript. Use of Template Literals enables multi-line strings, string interpolation, and use of curley brackets / braces to declare CSS rules in JSX.

Template Literals are enclosed by the back-tick (\` \`) (grave accent) character instead of double or single quotes. Learn more about Template Literals on [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals).

####JSX syntax [<img title="OPEN IN JSFIDDLE" align="right" src="https://img.shields.io/badge/OPEN%20IN%20JSFIDDLE--eaeff2.svg" />](https://jsfiddle.net/y2pnqh9e/1/)

In:
```js
import React from 'react';
import Style from 'reactive-style';

class Intro extends React.Component {
  render() {
    return (
      <Style>
        {`
          .intro {
            font-size: 13px;
          }
          .package {
            color: blue;
          }
          .package:hover {
            color: aqua;
          }
       `}

        <p className="intro">
          <b className="package">Reactive Style</b> has many of the benefits of
          inline styling like: scoping, ↑ cohesion, and ↓ coupling of files --
          <i>without</i> the costs and quirks of Reacts inline styling.
        </p>
      </Style>
    );
  }
}

export default Intro;
```

Out:
```html
<p class="intro _scoped-1">
  <style type="text/css">
    ._scoped-1.intro {
      font-size: 13px;
    }
    ._scoped-1 .package-name {
      color: blue;
    }
    ._scoped-1 .package-name:hover {
      color: aqua;
    }
  </style>

  <b class="package">Reactive Style</b> has many of the benefits of
  inline styling like: scoping, ↑ cohesion, and ↓ coupling of files --
  <i>without</i> the costs and quirks of Reacts inline styling.
</p>
```

### Additional Usage

#### JavaScript variables in your CSS [<img title="OPEN IN JSFIDDLE" align="right" src="https://img.shields.io/badge/OPEN%20IN%20JSFIDDLE--eaeff2.svg" />](https://jsfiddle.net/y2pnqh9e/3/)
In:
```js
import React from 'react';
import Style from 'reactive-style';

class Intro extends React.Component {
  render() {
    const fontSize = 13;

    return (
      <Style>
        {`
          .intro {
            font-size: ${ fontSize }px;  // ES2015 & ES6 Template Literal string interpolation
          }
          .package {
            color: blue;
          }
          .package:hover {
            color: aqua;
          }
       `}

        <p className="intro">
          <b className="package">Reactive Style</b> has many of the benefits of
          inline styling like: scoping, ↑ cohesion, and ↓ coupling of files --
          <i>without</i> the costs and quirks of Reacts inline styling.
        </p>
      </Style>
    );
  }
}

export default Intro;
```

Out:
```html
<p class="intro _scoped-1">
  <style type="text/css">
    ._scoped-1.intro {
      font-size: 13px;
    }
    ._scoped-1 .package {
      color: blue;
    }
    ._scoped-1 .package:hover {
      color: aqua;
    }
  </style>

  <b class="package">Reactive Style</b> has many of the benefits of
  inline styling like: scoping, ↑ cohesion, and ↓ coupling of files --
  <i>without</i> the costs and quirks of Reacts inline styling.
</p>
```

#### Layout styling [<img title="OPEN IN JSFIDDLE" align="right" src="https://img.shields.io/badge/OPEN%20IN%20JSFIDDLE--eaeff2.svg" />](https://jsfiddle.net/y2pnqh9e/5/)
Style your layout without using an external CSS file. Reactive Style makes keeping all of your CSS in the App component hierarchy easy -- from global layout to component specific styles.

In:
```js
import React from 'react';
import Style from 'reactive-style';

class App extends React.Component {
  render() {
    return (
      <div>
        <Style><commit_msg>Update readme jsfiddle links to reference @latest<commit_after># <img alt="Reactive Style" height="60" src="https://s3.amazonaws.com/reactive-style/reactive-style-logo.svg?11263" />
Reactive Style is a component for writing plaintext CSS in JavaScript apps. Use the same
familiar CSS syntax you already know and love -- now inside of your components.

[<img title="Version" src="https://img.shields.io/npm/v/reactive-style.svg?style=flat-square" />](https://www.npmjs.org/package/reactive-style) [<img title="License" src="https://img.shields.io/dub/l/vibe-d.svg?maxAge=2592000?style=flat-square" />](https://github.com/buildbreakdo/reactive-style/blob/master/LICENSE) [<img title="Maintenance Status" src="https://img.shields.io/badge/status-maintained-brightgreen.svg?style=flat-square" />](https://github.com/buildbreakdo/reactive-style/pulse)

| Feature               | Reactive Style | Inline Style |           |
| :-------------------- | :------------: | :----------: | :--------- |
| Nothing&nbsp;new to learn | &#10004;       |              | With Reactive Style, you use the same familiar CSS syntax you already know and love -- now inside of your components. Just wrap your component with Reactive Style and start writing CSS. |
| Fully featured        | &#10004;       |              | There is no abstraction to go through -- Reactive Style is just CSS. Use any CSS feature available. |
| Scoped selectors      | &#10004;       |              | Move your CSS out of the global name space. Reactive Style automatically scopes selectors for you to the component's root element and acts as a polyfill for sub-tree scoping (learn more on [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLStyleElement/scoped)). |
| [Layout styling](#layout-styling) | &#10004;       |              | Style your layout without using an external CSS file. Reactive Style makes keeping all of your CSS in the App component hierarchy easy -- from global layout to component specific styles. |


<p align="right">
    <b><a href="#user-content-more-features">SEE MORE &raquo;</a></b>
</p>

### Installation

Install with npm.

```sh
npm install reactive-style --save
```

Alternatively, if you are not using npm as your package manager the files can be downloaded directly from the [npm content delivery network](https://npmcdn.com/reactive-style/).

### Usage
Reactive Style takes advantage of ES2015 / ES6 specification for Template Literals (previously "template strings") to write plaintext CSS in JavaScript. Use of Template Literals enables multi-line strings, string interpolation, and use of curley brackets / braces to declare CSS rules in JSX.

Template Literals are enclosed by the back-tick (\` \`) (grave accent) character instead of double or single quotes. Learn more about Template Literals on [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals).

####JSX syntax [<img title="OPEN IN JSFIDDLE" align="right" src="https://img.shields.io/badge/OPEN%20IN%20JSFIDDLE--eaeff2.svg" />](https://jsfiddle.net/y2pnqh9e/10/)

In:
```js
import React from 'react';
import Style from 'reactive-style';

class Intro extends React.Component {
  render() {
    return (
      <Style>
        {`
          .intro {
            font-size: 13px;
          }
          .package {
            color: blue;
          }
          .package:hover {
            color: aqua;
          }
       `}

        <p className="intro">
          <b className="package">Reactive Style</b> has many of the benefits of
          inline styling like: scoping, ↑ cohesion, and ↓ coupling of files --
          <i>without</i> the costs and quirks of Reacts inline styling.
        </p>
      </Style>
    );
  }
}

export default Intro;
```

Out:
```html
<p class="intro _scoped-1">
  <style type="text/css">
    ._scoped-1.intro {
      font-size: 13px;
    }
    ._scoped-1 .package-name {
      color: blue;
    }
    ._scoped-1 .package-name:hover {
      color: aqua;
    }
  </style>

  <b class="package">Reactive Style</b> has many of the benefits of
  inline styling like: scoping, ↑ cohesion, and ↓ coupling of files --
  <i>without</i> the costs and quirks of Reacts inline styling.
</p>
```

### Additional Usage

#### JavaScript variables in your CSS [<img title="OPEN IN JSFIDDLE" align="right" src="https://img.shields.io/badge/OPEN%20IN%20JSFIDDLE--eaeff2.svg" />](https://jsfiddle.net/y2pnqh9e/11/)
In:
```js
import React from 'react';
import Style from 'reactive-style';

class Intro extends React.Component {
  render() {
    const fontSize = 13;

    return (
      <Style>
        {`
          .intro {
            font-size: ${ fontSize }px;  // ES2015 & ES6 Template Literal string interpolation
          }
          .package {
            color: blue;
          }
          .package:hover {
            color: aqua;
          }
       `}

        <p className="intro">
          <b className="package">Reactive Style</b> has many of the benefits of
          inline styling like: scoping, ↑ cohesion, and ↓ coupling of files --
          <i>without</i> the costs and quirks of Reacts inline styling.
        </p>
      </Style>
    );
  }
}

export default Intro;
```

Out:
```html
<p class="intro _scoped-1">
  <style type="text/css">
    ._scoped-1.intro {
      font-size: 13px;
    }
    ._scoped-1 .package {
      color: blue;
    }
    ._scoped-1 .package:hover {
      color: aqua;
    }
  </style>

  <b class="package">Reactive Style</b> has many of the benefits of
  inline styling like: scoping, ↑ cohesion, and ↓ coupling of files --
  <i>without</i> the costs and quirks of Reacts inline styling.
</p>
```

#### Layout styling [<img title="OPEN IN JSFIDDLE" align="right" src="https://img.shields.io/badge/OPEN%20IN%20JSFIDDLE--eaeff2.svg" />](https://jsfiddle.net/y2pnqh9e/12/)
Style your layout without using an external CSS file. Reactive Style makes keeping all of your CSS in the App component hierarchy easy -- from global layout to component specific styles.

In:
```js
import React from 'react';
import Style from 'reactive-style';

class App extends React.Component {
  render() {
    return (
      <div>
        <Style>
{'fraction_non_alphanumeric': 0.13434532023703222, 'fraction_numerical': 0.014043347674324214, 'mean_word_length': 2.748098570124734, 'pattern_counts': {'":': 0, '<': 97, '<?xml version=': 0, '>': 97, 'https://': 32, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5639012', 'n_tokens_mistral': 3959, 'n_tokens_neox': 3641, 'n_words': 1189}