react-redux-provide-theme

![build status](https://travis-ci.org/loggur/react-redux-provide-theme) ![npm version](https://www.npmjs.com/package/react-redux-provide-theme)
![npm downloads](https://www.npmjs.com/package/react-redux-provide-theme)

Provides themes as classes created by JSS to React components.

Installation

``npm install react-redux-provide-theme --save`

`Usage`

This provides React components with interchangeable themes and automatically namespaced classNames via the following propTypes:

- setTheme (Object theme) - the themeobject may contain any combination of the following, plus any other properties you deem necessary: -styles object - each key within this object will be automatically namespaced and added to your app's stylesheet by jss; you can then obtain the namespaced classNames via the reduced classesprop -globalStyles object - useful when you need to specify global styles; e.g., body, button, etc.

Your components may also be provided the following reduced props:

- theme- contains the entire theme object; nice to have if your app depends on custom properties (e.g., icons, images, boolean values, etc.) within the current theme -classes - the namespaced classNames automatically generated by jss; these classNames are derived from the theme.stylesobject -sheet - the jss sheet based on your theme.styles; you should rarely access this directly, as it's automatically attached/detached when setting the theme -globalSheet - the jss sheet based on your theme.globalStyles; you should rarely access this directly, as it's automatically attached/detached when setting the theme

A couple of notes:

1. Upon initializing the store, if you've supplied a theme with your provider's initialState, setTheme is automatically called which can be used to properly initialize the state of any other providers who make use of this provider's USE_THEME action type.

2. jssis designed to be extensible via plugins. As a convenience, the following plugins are used by default, mainly to allow your theme's styles to work similarly to React's inline styles: -jss-extend-jss-nested-jss-camel-case-jss-px-jss-vendor-prefixer-jss-props-sort

`Example`

See bloggur and bloggur-theme-dark. Protip: You can include images with your theme's bundle! It's also good practice to use vector formats (e.g., svg` files) where possible.

Usage

This provides React components with interchangeable themes and automatically namespaced classNames via the following propTypes:

- setTheme (Object theme) - the theme

 object may contain any combination of the following, plus any other properties you deem necessary:
  -

styles object - each key within this object will be automatically namespaced and added to your app's stylesheet by jss; you can then obtain the namespaced classNames via the reduced classes

 prop
  -

globalStyles object - useful when you need to specify global styles; e.g., body, button, etc.

Your components may also be provided the following reduced props:

- theme

 - contains the entire theme object; nice to have if your app depends on custom properties (e.g., icons, images, boolean values, etc.) within the current theme
-

classes - the namespaced classNames automatically generated by jss; these classNames are derived from the theme.styles

 object
-

sheet - the jss sheet based on your theme.styles

; you should rarely access this directly, as it's automatically attached/detached when setting the theme
-

globalSheet - the jss sheet based on your theme.globalStyles; you should rarely access this directly, as it's automatically attached/detached when setting the theme

A couple of notes:

1. Upon initializing the store, if you've supplied a theme with your provider's initialState, setTheme

 is automatically called which can be used to properly initialize the state of any other providers who make use of this provider's

USE_THEME action type.

2. jss

 is designed to be extensible via plugins.  As a convenience, the following plugins are used by default, mainly to allow your theme's styles to work similarly to React's inline styles:
  -