https://github.com/nathanmarks/jss-theme-reactor

NOT MAINTAINED Powerful theming layer for use with the jss CSS in JS library
https://github.com/nathanmarks/jss-theme-reactor

Last synced: 3 months ago
JSON representation

NOT MAINTAINED Powerful theming layer for use with the jss CSS in JS library

• Host: GitHub
• URL: https://github.com/nathanmarks/jss-theme-reactor
• Owner: nathanmarks
• License: mit
• Created: 2016-08-20T15:54:05.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2019-04-17T12:42:19.000Z (almost 6 years ago)
• Last Synced: 2024-11-03T12:32:09.752Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 92.8 KB
• Stars: 64
• Watchers: 2
• Forks: 6
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# jss-theme-reactor [![Build Status](https://img.shields.io/circleci/project/nathanmarks/jss-theme-reactor/master.svg?style=flat-square)](https://circleci.com/gh/nathanmarks/jss-theme-reactor) [![codecov](https://codecov.io/gh/nathanmarks/jss-theme-reactor/branch/master/graph/badge.svg)](https://codecov.io/gh/nathanmarks/jss-theme-reactor) [![npm](https://img.shields.io/npm/v/jss-theme-reactor.svg?style=flat-square)](https://www.npmjs.com/package/jss-theme-reactor)

## NOT MAINTAINED!

## Installation

Install `jss-theme-reactor`.

```bash

$ npm install jss-theme-reactor --save

```

## Usage

- [Basic example](#basic-example)

### Basic example

A super simple example demonstrating the basic functionality.

```javascript

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-tr-1'

```

Resulting document head:

```html

.button-root-tr-1 {

  color: red;

  font-size: 12px;

  font-family: Roboto;

}

```