Package Exports

react-with-theme

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-with-theme) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-with-theme

React component theme high order component helper

Usage

First create an object to represent your theme properties:

const themes = {
  lutalica: {
    primaryColor: 'white',
    secondaryColor: 'black'
  },
  klexos: {
    primaryColor: 'blue',
    secondaryColor: 'green'
  },
  default: {
    primaryColor: 'transparent',
    secondaryColor: 'transparent'
  }
}

Let's build an example react component:

const Header = ({ style }) => (<h1 style={style}>Header</h1>)

And decorate:

import WithTheme from 'react-with-theme'

const themeStyle = (theme) => ({ style: { color: theme.primaryColor} })

const Decorated = WithTheme({ themes, transform: themeStyle })(Header)

Now when you use <Decorated theme={'lutalica'} /> it will render <h1 style="color:'white'">Header</h1>

You can declare a default theme as fallback in case you don't inform a theme or misspell.

Contributing

First of all, thank you for wanting to help!

Fork it.
Create a feature branch - git checkout -b more_magic
Add tests and make your changes
Check if tests are ok - npm test
Commit changes - git commit -am "Added more magic"
Push to Github - git push origin more_magic
Send a pull request! ❤️ 💖 ❤️