React-cssobj NPM

react-cssobj

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

Install

npm install --save react-cssobj

Usage

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;

Here is Demo

API

MainEntry function signature:

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}.

HelperClass class members:

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

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') )

Live demo here