jssx

JSS meets JSX

JSSX is a small utility that makes it easier to use JSS within React components. More specifically it allows you to write this:

<button primary />

… instead of this:

<button className={classes.primary} />

Dynamic Class Names

Without JSSX you would probably use a tool like classnames in order to dynamically assign classes:

<div className={cx('btn', 'primary', { active })} />

With JSSX this boils down to:

  <div btn primary active={active} />

Usage

To use JSSX you need to add a @jsx pragma to your code that instructs babel to use a custom factory instead of React.createElement. This can be done like this:

import jss from 'jss';
import jssx from 'jssx';
import React from 'react';
 
const sheet = jss.createStyleSheet({
  // ...
});
 
// create an element factory:
const createElement = jssx(React, sheet);
 
// tell babel use that factory:
/* @jsx createElement */

Full Example

Here is a complete usage example:

import jss from 'jss';
import jssx from 'jssx';
import React from 'react';
import ReactDOM from 'react-dom';
 
const sheet = jss.createStyleSheet({
  item: {
    padding: '20px',
  },
  active: {
    fontWeight: 'bold',
  },
  primary: {
    background: 'lime',
  }
}).attach();
 
const createElement = jssx(React, sheet);
 
// tell babel to transpile JSX to createElement() calls:
/* @jsx createElement */
 
function MyComponent(props) {
  return (
    <div>
      <a href={props.link} active={props.active}>View</a>
      <button primary>Done</button>
    </div>
  );
}
 
ReactDOM.render(<MyComponent link="#" active />, document.getElementById('root'));

License

MIT