jss-theme-reactor

Installation

Install jss-theme-reactor along with jss.

$ npm install jss-theme-reactor jss jss-preset-default --save

Usage

• Basic example
• React integration
• Server-side rendering

Basic example

A super simple example demonstrating the basic functionality.

import { create as createJss } from 'jss';
import preset from 'jss-preset-default';
import { createStyleManager, createStyleSheet } from 'jss-theme-reactor';

themeObj = {
  fontFamily: 'Roboto',
  fontSize: 12,
  color: 'red',
};

styleManager = createStyleManager({
  jss: createJss(preset()),
  theme: themeObj,
});

styleSheet = createStyleSheet('button', (theme) => ({
  root: {
    color: theme.color,
    fontSize: theme.fontSize,
    fontFamily: theme.fontFamily,
  },
});

const classes = styleManager.render(styleSheet);

// classes.root === '.button__root-1l7rpve'

Resulting document head:

<style type="text/css" data-jss="" data-meta="button">
.button__root-1l7rpve {
  color: red;
  font-size: 12px;
  font-family: Roboto;
}
</style>

API Reference

---

API Reference

Modules

styleManager

styleManager module. Used to create styleManager objects.

styleSheet

styleSheet module. Used to create styleSheet objects.

styleManager

styleManager module. Used to create styleManager objects.

• styleManager
  • static
    • .createStyleManager(config) ⇒ styleManager
  • inner
    • ~styleManager : Object
      • .render(styleSheet, customTheme) ⇒ Object
      • .getClasses(styleSheet) ⇒ Object | null
      • .setSheetOrder(sheetNames)
      • .updateTheme(newTheme, liveUpdate)
      • .reset()
      • .rerender()

---

styleManager.createStyleManager(config) ⇒ styleManager

Creates a new styleManager

Kind: static method of styleManager
Returns: styleManager

Param	Type	Default	Description
config	Object		Config
config.jss	Object		Jss instance
config.theme	Object	{}	Theme object

---

styleManager~styleManager : Object

styleManager description

Kind: inner property of styleManager

• ~styleManager : Object
  • .render(styleSheet, customTheme) ⇒ Object
  • .getClasses(styleSheet) ⇒ Object | null
  • .setSheetOrder(sheetNames)
  • .updateTheme(newTheme, liveUpdate)
  • .reset()
  • .rerender()

---

styleManager.render(styleSheet, customTheme) ⇒ Object

Some mundane desc

Kind: static method of styleManager
Returns: Object - classNames keyed by styleSheet property names

Param	Type	Description
styleSheet	Object	styleSheet object created by createStyleSheet()
customTheme	Object | function	-

---

styleManager.getClasses(styleSheet) ⇒ Object | null

Get classes for a given styleSheet object

Kind: static method of styleManager
Returns: Object | null - class map object

Param	Type	Description
styleSheet	Object	styleSheet object

---

styleManager.setSheetOrder(sheetNames)

Set DOM rendering order by sheet names.

Kind: static method of styleManager

Param	Type	Description
sheetNames	Array	Sheet names sorted by rendering order

---

styleManager.updateTheme(newTheme, liveUpdate)

Replace the current theme with a new theme

Kind: static method of styleManager

Param	Type	Default	Description
newTheme	Object		New theme object
liveUpdate	boolean	true	Set to true to liveUpdate the renderer

---

styleManager.reset()

Reset JSS registry, remove sheets and empty the styleManager.

Kind: static method of styleManager

---

styleManager.rerender()

Reset and update all existing stylesheets

Kind: static method of styleManager

---

styleSheet

styleSheet module. Used to create styleSheet objects.

---

styleSheet.createStyleSheet(name, callback, options) ⇒ Object

Core function used to create styleSheet objects

Kind: static method of styleSheet
Returns: Object - styleSheet object

Param	Type	Description
name	string	Stylesheet name, should be unique
callback	function	Should return the raw rules object, passed theme as arg1
options	Object	Additional options

---