@nkbt/themr
v1.0.3
Published
Theming wrapper for React UI libs
Downloads
7
Maintainers
Readme
@nkbt/themr ![npm](https://img.shields.io/npm/v/@nkbt/themr.svg?style=flat-square)
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
Codepen demo
http://codepen.io/nkbt/pen/VxrYKq
Usage
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