README
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