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 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:

• 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.