@nkbt/themr

Theming wrapper for React UI libs

Installation

NPM

npm install --save @nkbt/themr

1998 Script Tag:

<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/@nkbt/themr/build/@nkbt/themr.min.js"></script>
(Module exposed as `themr`)

Demo

http://nkbt.github.io/themr

Codepen demo

http://codepen.io/nkbt/pen/VxrYKq

Usage

See example/App/index.js

Usage

Example of themed UI component

import {themr} from 'themr';
import css from './TextWithIcon.css';
/*
const css = {
  container: 'TextWithIcon-container',
  icon: 'TextWithIcon-icon',
  text: 'TextWithIcon-text',
}
*/

const TextWithIcon = ({icon, theme, ...props}) => (
  <div className={theme.container}>
    <span className={theme.icon} />
    <span className={theme.text} {...props} />
  </div>
);
TextWithIcon.propTypes = {
  theme: PropTypes.object.isRequired
};


export default themr(css, {override: false})(TextWithIcon);

Output

import TextWithIcon from './TextWithIcon';
import css from './Themed.css';
/*
const css = {
  text: 'Themed-text',
}
*/

const Themed = () =>
  <TextWithIcon theme={css}>Test</TextWithIcon>;

<div class="TextWithIcon-container">
  <span class="TextWithIcon-icon"></span>
  <span class="TextWithIcon-text Themed-text">Test</span>
  <!--                           ^^^ added class -->
  <!-- if {override: true} option was used-->
</div>

if {override: true} option was used

<div class="TextWithIcon-container">
  <span class="TextWithIcon-icon"></span>
  <span class="Themed-text">Test</span>
  <!--         ^^^ overridden class -->
</div>

Development and testing

Currently is being developed and tested with the latest stable Node on OSX.

To run example covering all ReactComponentRouter features, use yarn start, which will compile example/index.js

git clone [email protected]:nkbt/themr.git
cd themr
yarn install
yarn start

# then
open http://localhost:8080

Tests

# to run ESLint check
yarn lint

# to run tests
yarn test

License

MIT