redux-theme v0.3.4
note: early preview ! wait for 1.0.0 before using
Decorate your components using themes
This package try to provide best practices for managing inline-styles.
- radium for inline-style
- material-ui inspired theme template
- react-redux connect decorator for injecting themed styles
In term of UX:
Installation
npm install --save redux-theme
Usage
Modify app structure
Using redux-theme
add generally two new folders to your app structure:
└── src # Application source code
├── components # Generic React Components (generally Dumb components)
├── styles # Redux-theme styles definitions for components
├── themes # Redux-theme definitions
├── reducers # Redux reducers
etc...
Configure your store
Like other reducers, theme:
is required in app state shape.
;;; theme: themeReducer router: routerStateReducer;
Provide theme via ReduxTheme component
The ReduxTheme component responsible of :
On mount:
- Registering your themes
- Registering your styles
- Applying the first theme
On theme change:
- Update googlefont from theme
- Update body.backgroundColor from theme
Exemple:
; /// Some themes...const baseTheme = 'base';const myTheme = 'mytheme';myThemetypofont = 'Luckiest Guy, sans-serif'; const textStyle = base: fontFamily: themetypofont ; // Build array of themes and stylesconst themes = defaultTheme myTheme;const styles = componentName: 'Text' // Will apply on decorated component with this name style: textStyle; { const store = thisprops; return <div> <ReduxTheme store=store themes=themes styles=styles defaultTheme='mytheme' /> <Provider store=store> <ReduxRouter> routes </ReduxRouter> </Provider> </div> ;}
Decorate your components
Connect you components using @connectTheme
decorator.
Your component will receive a styles
props. with radium
styles.
note: The component class name is used for resolution of styles, in this case, it will look for a Button in theme.styles of your state.
;; @connectTheme static propTypes = styles: PropTypesobjectisRequired { const styles kind action text = thisprops; return <button style= stylesbase styleskind onClick=action > text </button> }
Theme class
You can use, override and export the default redux-theme
:
Colors and utilities is also provided.
new Theme ()
// /themes/custom-theme.js; const customTheme = 'custom';// Change some default theme propertiescustomThemetypofont = 'Luckiest Guy, sans-serif';customThemepalettesubTextColor = ColorManipulator;;
Available methods
A theme can register and apply if you provide the dispatch func.
const customTheme = 'custom';// Change some default theme properties// ...const dispatch = thisprops;customTheme;customTheme;
Styles
A style file is a function receiving the current theme as argument.
Style file is using radium
convention for applying a kind
.
{ return base: display: 'inline-block' fontSize: '18px' fontFamily: themetypofont fontWeight: 400 textTransform: 'uppercase' cursor: 'pointer' userSelect: 'none' outline: 'none' marginTop: '3px' minWidth: themespacingdesktopKeylineIncrement * 2 border: 'none' paddingLeft: '5px' paddingRight: '5px' paddingTop: '5px' paddingBottom: '5px' color: themepalettetextColor backgroundColor: themepaletteprimary1Color borderRadius: themeshapesdefaultBorderRadius ':hover': backgroundColor: themepaletteprimary3Color ':focus': backgroundColor: themepaletteprimary3Color ':active': backgroundColor: themepaletteprimary3Color small: paddingLeft: '15px' paddingRight: '15px' accept: fontWeight: 'bold' cancel: fontStyle: 'italic' };
Reducer actions
You can bootstrap your theme by dipatching action yourself. Logic order is:
- register your themes
- register your styles
- you can apply one of your registred themes
registerTheme (<theme object>)
registerStyle (<component name>, <style function>)
applyTheme (<theme name>)