node package manager
Loosely couple your services. Use Orgs to version and reuse your code. Create a free org »

react-scoped-style

react-scoped-style


scope react element by transform external style into inline styles

NPM version build status Test coverage gemnasium deps node version npm download

Development

npm install
npm start

Example

http://localhost:8000/examples/

online example: http://yiminghe.github.io/react-scoped-style/

docs

Feature

  • support ie8,ie8+,chrome,firefox,safari
  • does not support css priority (just apply rules by css order in source text)
  • does not support css property inheritance (no shadow dom...)
  • does not support :hover, :active ....
  • does not support css media query

install

react-scoped-style

Usage

import ScopedStyle, { createStyleSheet } from 'react-scoped-style';
import React from 'react';
import ReactDOM from 'react-dom';
var style = createStyleSheet(`
.test {
  color:red;
  zoom:1.5;
}
div>span{
  color:green;
  zoom:1.5;
}
`);
 
var html = <div>
  <p className="test">scope react element by transform external style into inline styles</p>
  <p>
    <a href="https://github.com/yiminghe/react-scoped-style">repo</a>
  </p>
 
  <ScopedStyle style={style}>
    <div>
      <span>green zoom</span>
      <span style={{color: 'blue'}}>blue zoom</span>
      <p>
        <span>black</span>
        <span>  -   </span>
        <a className='test'>red zoom</a>
      </p>
 
      <ScopedStyle>
        <a className='test'>black isolate</a>
      </ScopedStyle>
 
      <ScopedStyle scoped={false}>
        <a className='test'>red zoom penetrate</a>
      </ScopedStyle>
    </div>
  </ScopedStyle>
</div>;
 
ReactDOM.render(html, document.getElementById('__react-content'));

API

props

name type default description
scoped Boolean true whether isolated from outside
style String|ParsedCssResult style to be applied

methods

  • ParsedCssResult createStyleSheet(css:String) parse css into object

  • ReactElement transformElement(root:ReactElement, css:String|ParsedCssResult)

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

react-scoped-style is released under the MIT license.