react-cssobj

React work with [cssobj][], make stylesheet localized, runtime updating, and more.


[cssobj]: https://github.com/cssobj/cssobj

Install

``
npm install --save react-cssobj
`

Usage

`jsx
import React from 'react'
import ReactCSS from 'react-cssobj'

const {css, mapClass} = ReactCSS({
'.app': {
background: 'red'
},
'.appTitle': {
'&.large':{
fontSize:'3rem'
},
color: 'blue'
},
})

export default class App extends React.Component {
render(){
return mapClass ( // <<<-- Rocks!


onClick = {() => {
css.set(['.app'], {background: 'yellow'})
this.setState({})
}}>
Title

)
}
}

`

Render result: (stylesheet be rendered in , thank to [cssobj][])

`html


Title


`


Then, when you clicked on h2, the result:

`html


Title


`

also, the stylesheet for .app rule updated to background: yellow;

Here is Demo

API

$3

`
function( jsObject, cssobjConfig ) -> Instance of HelperClass
`

- jsObject: _[object]_ Javascript object represetation of stylesheet, same as [cssobj][]'s 1st argument.

- cssobjConfig: _[optional, object]_ The config option, same as [cssobj][]'s 2nd argument, but with default value: {local: true}.




$3

- css: _[object]_ The cssobj result object.

- mapClass: _[function (jsx) -> jsx]_ Transform JSX into new JSX, with className props transformed:

1. First passed into classnames

2. Then passed into [cssobj][] result.mapClass

3. The final value is localized className as string




$3

MainEntry has below methods as shortcuts for related modules:

- cssobj: _[function]_ Same as require('[cssobj][]')

- classNames: _[function]_ Same as require('classnames')

- changeProps: _[function]_ Same as require('react-change-props')

Notes

$3

mapClass is only current-level transformer, when met a component like , it will not dig into it, keep the component clean in it's own render().

`jsx

const {css, mapClass} = ReactCSSObj({
'.app': {
'p.foo': {color: 'red'}
}
})

function Foo() {
return

Hello

}

function MyComponent() {
return mapClass(

)
}

`

Above example, p will rendered as is, p.foo will not be localized, to work, you should change Foo like below:

`jsx
function Foo() {
return mapClass(

Hello

)
}
`

$3

If you want get/use localized className some where (like DOM), you can use [cssobj][] method css.mapClass:

`jsx
function Foo() {
return

el => el.onclick = () => $(el).toggleClass( css.mapClass('bar') )
}>Hello

}

// any where you want to query a DOM:
document
.querySelector( css.mapSel('.app p.foo') )
.removeClass( css.mapClass('bar') )
``

Live demo here

Other

You may want babel-plugin-transform-cssobj if you don't hope runtime interpolate.