react-jsss

Integrate JSSS CSS preprocessor into React.js components

Usage no npm install needed!

<script type="module">
  import reactJsss from 'https://cdn.skypack.dev/react-jsss';
</script>

README

React JSSS

Build Status Dependency Status

React JSSS is JavaScript based styler for React components inspired by React Style and JSSS-Compiler.

Installation

$ npm install react-jsss

Usage

Define styles using JavaScript:

var ReactJsss = require('react-jsss')

var styles = ReactJsss({
  color: 'red',
  backgroundColor: 'white'
})

Style React components:

var React = require('react')

var HelloWorld = React.createClass({

  render() {
    var dynamicStyles = ReactJsss({color: this.props.color})
    return React.createElement('div', {styles: [styles, dynamicStyles]}, 'Hello, world!')
  }
})

Or register tag style:

ReactJsss.registerTagStyle('div', {fontSize: '2em'})

Now render application styled:

ReactJsss.inject()
React.renderComponent(
  React.createElement(HelloWorld, {color: 'red'}),
  document.body
)