Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Styling in React Toolbox

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.

Javier Velasco

October 28, 2016
Tweet

More Decks by Javier Velasco

Other Decks in Programming

Transcript

  1. hi!

  2. 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);
  3. 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);
  4. 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);
  5. 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;
  6. 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;
  7. 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;
  8. 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;
  9. 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) );
  10. 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) );
  11. 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) );
  12. 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') );
  13. 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') );
  14. 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') );
  15. 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') );
  16. // 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);
  17. 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 };
  18. 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 };
  19. 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 };
  20. 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 };
  21. // 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);
  22. // 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);
  23. // 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);
  24. // 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);
  25. 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
  26. import React from 'react'; import Button from 'react-toolbox/lib/button'; import theme

    from './custom.css'; export default props => <Button theme={theme} {...props} />;
  27. themr builds classnames for you you still deal with selector

    priorities but it's pretty much working
  28. react-toolbox is shipped with css variables works in modern browsers

    (not ie) so maybe you need to transform the css
  29. 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