react-cssobj
v1.2.6
Published
React work with cssobj, make stylesheet localized, runtime updating, and more
Downloads
23
Maintainers
cssobjReadme
react-cssobj
React work with cssobj, make stylesheet localized, runtime updating, and more.
Install
npm install --save react-cssobjUsage
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!
<header className = 'app'>
<h2 className = {{'appTitle': true, 'large': this.state}}
onClick = {() => {
css.set(['.app'], {background: 'yellow'})
this.setState({})
}}>
Title
</h2>
</header>
)
}
}
Render result: (stylesheet be rendered in <head>, thank to cssobj)
<header class="app_17fzew31_">
<h2 class="appTitle_17fzew31_">Title</h2>
</header>Then, when you clicked on h2, the result:
<header class="app_17fzew31_">
<h2 class="appTitle_17fzew31_ large_17fzew31_">Title</h2>
</header>also, the stylesheet for .app rule updated to background: yellow;
API
MainEntry [function] signature:
function( jsObject, cssobjConfig ) -> Instance of HelperClassjsObject: [object] Javascript object represetation of stylesheet, same as cssobj's 1st argument.
cssobjConfig: [optional, object] The
configoption, same as cssobj's 2nd argument, but with default value:{local: true}.
HelperClass [class] members:
css: [object] The cssobj result object.
mapClass: [function (jsx) -> jsx] Transform JSX into new JSX, with
classNameprops transformed:First passed into classnames
Then passed into cssobj result.mapClass
The final value is localized
classNameasstring
Static Methods
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
1. No inject into sub-component
mapClass is only current-level transformer, when met a component like <Foo/>, it will not dig into it, keep the component clean in it's own render().
const {css, mapClass} = ReactCSSObj({
'.app': {
'p.foo': {color: 'red'}
}
})
function Foo() {
return <p className="foo">Hello</p>
}
function MyComponent() {
return mapClass(<div className="app"><Foo/></div>)
}
Above example, p will rendered as is, p.foo will not be localized, to work, you should change Foo like below:
function Foo() {
return mapClass(<p className="foo">Hello</p>)
}2. Get localized class names
If you want get/use localized className some where (like DOM), you can use cssobj method css.mapClass:
function Foo() {
return <p className={css.mapClass('foo')} ref={
el => el.onclick = () => $(el).toggleClass( css.mapClass('bar') )
}>Hello</p>
}
// any where you want to query a DOM:
document
.querySelector( css.mapSel('.app p.foo') )
.removeClass( css.mapClass('bar') )Other
You may want babel-plugin-transform-cssobj if you don't hope runtime interpolate.