ca-ui-react-themer-jss

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>"

License

Copyright (c) 2017 CA. All rights reserved. This software may be modified and distributed under the terms of the MIT license. To learn more, see the License.