Theming in React
0 likes322 views
The document outlines theming in React, emphasizing separation of concerns, reusability, and maintainability through techniques like container/presentation, higher-order components, and style composition. It discusses the components of a theming system, such as theme providers, connectors, and the challenges of performance and stylesheet management. Additionally, it highlights various styling strategies and libraries that can be used to implement dynamic theming in React applications.
Theming in React
- 1. Theming in React Morgan Dedmon Front end developer at Match.com
- 2. Separation of Concerns • Container/Presentation • Abstraction of reusable functionality • Compositions/augmented functionality through Higher-Order Components (HOCs)
- 3. It starts with a wireframe… Lessons from UX design Image Source: https://www.behance.net/gallery/32086935/Close-App-Web-Sketch-to-Design
- 4. It starts with a wireframe… Lessons from UX design Image Source: https://www.behance.net/gallery/32086935/Close-App-Web-Sketch-to-Design
- 5. If separation of state and UI is best practice, why not UI and styles? Reusability: ship your components without styles!
- 6. Style Composition • Well defined visual design • High visual consistency • Easily reuse components • Decouple components from application • Maintainability • Reconfigure styles across brands faster • Redesigns and iterations
- 7. Theme • Font • Colors • Images • Text direction • Shadows Reusable set of visual styles for consistency across views • Border Radiuses • Animations • Repeated Patterns • Margins • Paddings
- 8. 8 Super Simple “Theme” — Color Palette
- 10. Theme • Font • Colors • Images • Text direction • Shadows Reusable set of visual styles for consistency across views • Border Radiuses • Animations • Repeated Patterns • Margins • Paddings
- 11. Passing the Theme • Props • Context • HOC • Provider • Decorator
- 12. Theme Manager • Style object containing all style info for your theme • Can be classnames-based or CSS in JS Configuration for all themed styles
- 13. Theme Provider • Wraps themed part of application • Exposes theme instance and puts it into context or props React Bindings
- 14. Theme Connector • HOC • Reads theme info from context and passes to props • Theme passed as set of classname objects to components Decorator
- 15. Themed Component • Expects map of style classes as prop • Knows how to apply classes in internal implementation Decorated Component
- 16. Needs in a Theming System • Runtime theme switching • Decouple component and UI style • Easily implemented theme variations • Support variations on component branches • Easily overwritten • Performance
- 17. Styling Strategies • Theme object of injected classnames • Classnames provided and mapped via props • Namespaced themes • Challenges: tree shaking, removal of old themes, stylesheet bloat, specificity, loading themes/fonts separately CSS Stylesheet
- 18. Super Simple “Theme” — Color Palette
- 19. Styling Strategies CSS Stylesheet ** A really excellent library using a similar approach is react-css-themr
- 20. Styling Strategies JS Based • Dynamic • Theme object made up of JS object of styles • Variables shared between CSS and JS • Expressiveness • Themes can be type-safe • Dead code elimination • Challenges: Performance-downsides (can often be addressed with build plugins) • Styletron • React Stylesheets • Styled-Components • Glamour • AirBnB react-with-styles
- 22. Helpful Resources • Style Composition • Patterns for Style Composition - http://jxnblk.com/writing/posts/patterns-for-style- composition-in-react/ • Pure UI - https://rauchg.com/2015/pure-ui • Rebass - http://jxnblk.com/rebass/ • Theming • React Future UI - https://github.com/nikgraf/future-react-ui • Theme-standard - https://github.com/theme-standard • Theming Libraries • Rethemeable - https://github.com/andreypopp/rethemeable • React-themeable - https://github.com/markdalgleish/react-themeable • React-with-styles - https://github.com/airbnb/react-with-styles