Styling in React Toolbox

Lightning Talk for Reactive Conference 2016. A lot to tell in just five minutes. Feel free to ping me if you need it.

Transcript

1. hi!
2. <Developer name=`Javi Velasco` company=`Audiense` twitter=`@javivelasco` sideProject=`www.react-toolbox.com` />
3. smart social intelligence
4. bootstrap your application with beautiful material design components react toolbox
5. or why the f*** did you build this thing? what’s special about it?
7. but still there are other issues… benefits of traditional css.
8. configuration customization theming
9. really painful stuff… configuration
10. also configuring webpack is not easy we can’t force people to use any tool
11. import React from 'react'; import Icon from '../components/icon'; import ripple from '../components/ripple'; import style from './style.css'; const Button = ({ children, className, icon, ...other }) => ( <button {...other} className={`${style.button} ${className}`}> {icon && <Icon className={style.icon} value={icon} />} {children} </button> ); export default ripple()(Button);
12. import React from 'react'; import Icon from '../components/icon'; import ripple from '../components/ripple'; import style from './style.css'; const Button = ({ children, className, icon, ...other }) => ( <button {...other} className={`${style.button} ${className}`}> {icon && <Icon className={style.icon} value={icon} />} {children} </button> ); export default ripple()(Button);
13. import React from 'react'; import Icon from '../components/icon'; import ripple from '../components/ripple'; const Button = ({ children, className, icon, theme, ...other }) => ( <button {...other} className={`${theme.button} ${className}`}> {icon && <Icon className={theme.icon} value={icon} />} {children} </button> ); export default ripple()(Button);
14. import React from 'react'; import Button from 'react-toolbox/lib/button/Button'; const theme = { button: 'button', icon: 'icon' }; const RTButton = ({ ...props }) => ( <Button {...props} theme={theme} /> ); export default RTButton;
15. import React from 'react'; import Button from 'react-toolbox/lib/button/Button'; const theme = { button: 'button', icon: 'icon' }; const RTButton = ({ ...props }) => ( <Button {...props} theme={theme} /> ); export default RTButton;
16. import React from 'react'; import Button from 'react-toolbox/lib/button/Button'; const theme = { button: 'button', icon: 'icon' }; const RTButton = ({ ...props }) => ( <Button {...props} theme={theme} /> ); export default RTButton;
17. import React from 'react'; import Button from 'react-toolbox/lib/button/Button'; const theme = { button: 'button', icon: 'icon' }; const RTButton = ({ ...props }) => ( <Button {...props} theme={theme} /> ); export default RTButton;
18. github.com/javivelasco/react-css-themr react-css-themr
19. higher order component provider
20. import React from 'react'; import { themr } from 'react-css-themr'; import Icon from '../components/icon'; import ripple from '../components/ripple'; const Button = ({ children, className, icon, theme, ...other }) => ( <button {...other} className={`${theme.button} ${className}`}> {icon && <Icon className={theme.icon} value={icon} />} {children} </button> ); export default themr('RTButton')( ripple()(Button) );
21. import React from 'react'; import { themr } from 'react-css-themr'; import Icon from '../components/icon'; import ripple from '../components/ripple'; const Button = ({ children, className, icon, theme, ...other }) => ( <button {...other} className={`${theme.button} ${className}`}> {icon && <Icon className={theme.icon} value={icon} />} {children} </button> ); export default themr('RTButton')( ripple()(Button) );
22. import React from 'react'; import { themr } from 'react-css-themr'; import Icon from '../components/icon'; import ripple from '../components/ripple'; const Button = ({ children, className, icon, theme, ...other }) => ( <button {...other} className={`${theme.button} ${className}`}> {icon && <Icon className={theme.icon} value={icon} />} {children} </button> ); export default themr('RTButton')( ripple()(Button) );
23. import React from 'react'; import { render } from 'react-dom'; import { ThemeProvider } from 'react-css-themr'; import App from './App.js'; const theme = { RTButton: { button: 'button', icon: 'icon' } }; render( <ThemeProvider theme={theme}> <App /> </ThemeProvider> , document.getElementById('app') );
24. import React from 'react'; import { render } from 'react-dom'; import { ThemeProvider } from 'react-css-themr'; import App from './App.js'; const theme = { RTButton: { button: 'button', icon: 'icon' } }; render( <ThemeProvider theme={theme}> <App /> </ThemeProvider> , document.getElementById('app') );
25. import React from 'react'; import { render } from 'react-dom'; import { ThemeProvider } from 'react-css-themr'; import App from './App.js'; const theme = { RTButton: { button: 'button', icon: 'icon' } }; render( <ThemeProvider theme={theme}> <App /> </ThemeProvider> , document.getElementById('app') );
26. import React from 'react'; import { render } from 'react-dom'; import { ThemeProvider } from 'react-css-themr'; import theme from 'react-toolbox/lib/themes/default.js'; import App from './App.js'; render( <ThemeProvider theme={theme}> <App /> </ThemeProvider> , document.getElementById('app') );
27. once configured it is really convenient i wanna keep implicit css requires!
28. // Button/index.js import { themr } from 'react-css-themr'; import Button from './Button.js'; import theme from './theme.css'; export default themr('RTButton', theme)(Button);
29. dependencies should come with css too you should decorate once
30. import React from 'react'; import { themr } from 'react-css-themr'; import InjectIcon from '../components/icon/Icon.js'; import injectRipple from '../components/ripple/ripple.js'; const factory = ({ Icon, ripple }) => { const Button = ({ children, className, icon, theme, ...other }) => ( <button {...other} className={`${theme.button} ${className}`}> {icon && <Icon className={theme.icon} value={icon} />} {children} </button> ); return ripple()(Button); }; const ThemedButton = themr('RTButton')( factory({ Icon: InjectIcon, ripple: injectRipple }) ); export default ThemedButton; export { factory };
31. import React from 'react'; import { themr } from 'react-css-themr'; import InjectIcon from '../components/icon/Icon.js'; import injectRipple from '../components/ripple/ripple.js'; const factory = ({ Icon, ripple }) => { const Button = ({ children, className, icon, theme, ...other }) => ( <button {...other} className={`${theme.button} ${className}`}> {icon && <Icon className={theme.icon} value={icon} />} {children} </button> ); return ripple()(Button); }; const ThemedButton = themr('RTButton')( factory({ Icon: InjectIcon, ripple: injectRipple }) ); export default ThemedButton; export { factory };
32. import React from 'react'; import { themr } from 'react-css-themr'; import InjectIcon from '../components/icon/Icon.js'; import injectRipple from '../components/ripple/ripple.js'; const factory = ({ Icon, ripple }) => { const Button = ({ children, className, icon, theme, ...other }) => ( <button {...other} className={`${theme.button} ${className}`}> {icon && <Icon className={theme.icon} value={icon} />} {children} </button> ); return ripple()(Button); }; const ThemedButton = themr('RTButton')( factory({ Icon: InjectIcon, ripple: injectRipple }) ); export default ThemedButton; export { factory };
33. import React from 'react'; import { themr } from 'react-css-themr'; import InjectIcon from '../components/icon/Icon.js'; import injectRipple from '../components/ripple/ripple.js'; const factory = ({ Icon, ripple }) => { const Button = ({ children, className, icon, theme, ...other }) => ( <button {...other} className={`${theme.button} ${className}`}> {icon && <Icon className={theme.icon} value={icon} />} {children} </button> ); return ripple()(Button); }; const ThemedButton = themr('RTButton')( factory({ Icon: InjectIcon, ripple: injectRipple }) ); export default ThemedButton; export { factory };
34. // Button/index.js import { themr } from 'react-css-themr'; import { factory as buttonFactory } from './Button.js'; import ripple from '../components/ripple'; import Icon from '../components/icon'; import theme from './theme.css'; const Button = buttonFactory({ Icon, ripple }); export default themr('RTButton', theme)(Button);
35. // Button/index.js import { themr } from 'react-css-themr'; import { factory as buttonFactory } from './Button.js'; import ripple from '../components/ripple'; import Icon from '../components/icon'; import theme from './theme.css'; const Button = buttonFactory({ Icon, ripple }); export default themr('RTButton', theme)(Button);
36. // Button/index.js import { themr } from 'react-css-themr'; import { factory as buttonFactory } from './Button.js'; import ripple from '../components/ripple'; import Icon from '../components/icon'; import theme from './theme.css'; const Button = buttonFactory({ Icon, ripple }); export default themr('RTButton', theme)(Button);
37. // Button/index.js import { themr } from 'react-css-themr'; import { factory as buttonFactory } from './Button.js'; import ripple from '../components/ripple'; import Icon from '../components/icon'; import theme from './theme.css'; const Button = buttonFactory({ Icon, ripple }); export default themr('RTButton', theme)(Button);
38. it’s still just css customization
39. there is kind of an api of classnames it’s a well-known set of properties you can pass your own! but just what you need
40. .button { background: blue } .icon { color: red; }
41. import React from 'react'; import Button from 'react-toolbox/lib/button'; import theme from './custom.css'; export default props => <Button theme={theme} {...props} />;
42. themr builds classnames for you you still deal with selector priorities but it's pretty much working
43. ¯\_(ツ)_/¯
44. with postcss properties theming
45. react-toolbox is shipped with css variables works in modern browsers (not ie) so maybe you need to transform the css
46. but it’s awesome! we are shipping a script to build your themes no need to setup, just run the script you’ll get your custom theme.css and theme.js
47. this is running in the browser let me show you something