rss

react-scoped-style

scope react element by transform external style into inline styles

Showing:

Popularity

Downloads/wk

28

Maintenance

No Maintenance Data Available

Package

Dependencies

0

Size (min+gzip)

8.3KB

License

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100