❤
npm
Sign UpSign In

react-cssobj

1.2.6 • Public • Published

react-cssobj

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

npm Build Status

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:

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

Other

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

Readme

Keywords

Package Sidebar

Install

npm i react-cssobj

Repository

github.com/futurist/react-cssobj

Homepage

github.com/futurist/react-cssobj#readme

Weekly Downloads

2

Version

1.2.6

License

Apache-2.0

Unpacked Size

35.1 kB

Total Files

6

Last publish

Collaborators

  • cssobj
Try on RunKit
Report malware