jss

jssx

JSS meets JSX

Showing:

Popularity

Downloads/wk

1

Maintenance

No Maintenance Data Available

Package

Dependencies

0

Size (min+gzip)

0.4KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

JSS logo

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100