Ca-ui-react-themer-jss NPM

react-themer-jss

Overview

Themer middleware for React JSS integration. This library allows component developers to use JSS to style React components while using themer and react-themer to make their components themes extensible.

Installation

npm install ca-ui-react-themer-jss --save

Usage

Simple usage in React component

/HelloWorld.js

import React from 'react';
import reactThemerJSS from 'ca-ui-react-themer-jss';

const HelloWorld = (props) => {
  const styles = props.theme && props.theme.styles ? props.theme.styles : {};
  return <div className={styles.root}>Hello world</div>;
};

// define JSS styles in theme object
const helloWorldTheme = {
  styles: {
    root: {
      textAlign: 'center',
      fontSize: '20px',
      color: 'white',
      background: 'blue'
    }
  }
};

export default reactThemerJSS(helloWorldTheme)(HelloWorld);

Advanced usage

You can also create your own instance of reactThemerJSS and specify custom options for JSS and Themer.

/customThemer.js

import { create as createJss } from 'jss';
import { create as createInjectSheet } from 'react-jss';
import { create as createThemer } from 'ca-ui-themer';
import { create as createReactThemer } from 'ca-ui-react-themer';
import { createMiddleware as createReactThemerJssMiddleware } from 'ca-ui-react-themer-jss';

// setup custom JSS instance
const jss = createJss();
const injectSheet = createInjectSheet(jss);

// create new Themer instance
const themer = createThemer();

// set react-themer-jss middleware
themer.setMiddleware(createReactThemerJssMiddleware(injectSheet));

// export react-themer instance
export default createReactThemer(themer);

Then use the exported instance in your components:

/HelloWorld.js

import React from 'react';

// import themer from local file
import customThemer from './customThemer';

const HelloWorld = (props) => {
  const styles = props.theme && props.theme.styles ? props.theme.styles : {};
  return <div className={styles.root}>Hello world</div>;
};

// define JSS styles in theme object
const helloWorldTheme = {
  styles: {
    root: {
      textAlign: 'center',
      fontSize: '20px',
      color: 'white',
      background: 'blue'
    }
  }
};

export default customThemer(helloWorldTheme)(HelloWorld);

Development

`npm run <script>`	Description
`lint`	Runs eslint against all `.js` files in `./src` folder.
`flow`	Runs flowtype validation against all `.js` files in `./src` and `./tests` folders.
`test`	Runs Mocha against all `./src/*.spec.js` files.
`test:watch`	Runs long running `test` command.
`test:coverage`	Runs `test` command and generates coverage report.
`precommit`	Runs `lint`, `flow`, `test` commands.
`commit`	Uses commitizen to do proper tagged commits.
`release`	Uses semantic-release to trigger releases.

How Can You Contribute

Your contributions are welcome and much appreciated. To learn more, see the Contribution Guidelines.

This project supports commitizen. You can use npm run commit to run the local instance of commitizen or git cz if you have it installed globally.

Alternatively, if you are simply using git commit, you must follow this format: git commit -m "<type>: <subject>"