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.
npm install ca-ui-react-themer-jss --save
/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);
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);
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. |
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>"
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.