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!
   

   View Slide

2. name=`Javi Velasco`
   company=`Audiense`
   twitter=`@javivelasco`
   sideProject=`www.react-toolbox.com`
   />
   

   View Slide

3. smart social intelligence
   

   View Slide

4. bootstrap your application with beautiful material design components
   react toolbox
   

   View Slide

5. or why the f*** did you build this thing?
   what’s special about it?
   

   View Slide

6. View Slide

7. but still there are other issues…
   benefits of traditional css.
   

   View Slide

8. configuration
   customization
   theming
   

   View Slide

9. really painful stuff…
   configuration
   

   View Slide

10. also configuring webpack is not easy
    we can’t force people to use any tool
    

    View Slide

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 }) => (
    
    {icon && }
    {children}
    
    );
    export default ripple()(Button);
    

    View Slide

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 }) => (
    
    {icon && }
    {children}
    
    );
    export default ripple()(Button);
    

    View Slide

13. import React from 'react';
    import Icon from '../components/icon';
    import ripple from '../components/ripple';
    const Button = ({ children, className, icon, theme, ...other }) => (
    
    {icon && }
    {children}
    
    );
    export default ripple()(Button);
    

    View Slide

14. import React from 'react';
    import Button from 'react-toolbox/lib/button/Button';
    const theme = {
    button: 'button',
    icon: 'icon'
    };
    const RTButton = ({ ...props }) => (
    
    );
    export default RTButton;
    

    View Slide

15. import React from 'react';
    import Button from 'react-toolbox/lib/button/Button';
    const theme = {
    button: 'button',
    icon: 'icon'
    };
    const RTButton = ({ ...props }) => (
    
    );
    export default RTButton;
    

    View Slide

16. import React from 'react';
    import Button from 'react-toolbox/lib/button/Button';
    const theme = {
    button: 'button',
    icon: 'icon'
    };
    const RTButton = ({ ...props }) => (
    
    );
    export default RTButton;
    

    View Slide

17. import React from 'react';
    import Button from 'react-toolbox/lib/button/Button';
    const theme = {
    button: 'button',
    icon: 'icon'
    };
    const RTButton = ({ ...props }) => (
    
    );
    export default RTButton;
    

    View Slide

18. github.com/javivelasco/react-css-themr
    react-css-themr
    

    View Slide

19. higher order component
    provider
    

    View Slide

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 }) => (
    
    {icon && }
    {children}
    
    );
    export default themr('RTButton')(
    ripple()(Button)
    );
    

    View Slide

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 }) => (
    
    {icon && }
    {children}
    
    );
    export default themr('RTButton')(
    ripple()(Button)
    );
    

    View Slide

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 }) => (
    
    {icon && }
    {children}
    
    );
    export default themr('RTButton')(
    ripple()(Button)
    );
    

    View Slide

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(
    
    
    
    , document.getElementById('app')
    );
    

    View Slide

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(
    
    
    
    , document.getElementById('app')
    );
    

    View Slide

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(
    
    
    
    , document.getElementById('app')
    );
    

    View Slide

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(
    
    
    
    , document.getElementById('app')
    );
    

    View Slide

27. once configured it is really convenient
    i wanna keep implicit css requires!
    

    View Slide

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);
    

    View Slide

29. dependencies should come with css too
    you should decorate once
    

    View Slide

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 }) => (
    
    {icon && }
    {children}
    
    );
    return ripple()(Button);
    };
    const ThemedButton = themr('RTButton')(
    factory({ Icon: InjectIcon, ripple: injectRipple })
    );
    export default ThemedButton;
    export { factory };
    

    View Slide

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 }) => (
    
    {icon && }
    {children}
    
    );
    return ripple()(Button);
    };
    const ThemedButton = themr('RTButton')(
    factory({ Icon: InjectIcon, ripple: injectRipple })
    );
    export default ThemedButton;
    export { factory };
    

    View Slide

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 }) => (
    
    {icon && }
    {children}
    
    );
    return ripple()(Button);
    };
    const ThemedButton = themr('RTButton')(
    factory({ Icon: InjectIcon, ripple: injectRipple })
    );
    export default ThemedButton;
    export { factory };
    

    View Slide

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 }) => (
    
    {icon && }
    {children}
    
    );
    return ripple()(Button);
    };
    const ThemedButton = themr('RTButton')(
    factory({ Icon: InjectIcon, ripple: injectRipple })
    );
    export default ThemedButton;
    export { factory };
    

    View Slide

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);
    

    View Slide

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);
    

    View Slide

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);
    

    View Slide

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);
    

    View Slide

38. it’s still just css
    customization
    

    View Slide

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
    

    View Slide

40. .button {
    background: blue
    }
    .icon {
    color: red;
    }
    

    View Slide

41. import React from 'react';
    import Button from 'react-toolbox/lib/button';
    import theme from './custom.css';
    export default props =>
    ;
    

    View Slide

42. themr builds classnames for you
    you still deal with selector priorities
    but it's pretty much working
    

    View Slide

43. ¯\_(ツ)_/¯
    

    View Slide

44. with postcss properties
    theming
    

    View Slide

45. react-toolbox is shipped with css variables
    works in modern browsers (not ie)
    so maybe you need to transform the css
    

    View Slide

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
    

    View Slide

47. this is running in the browser
    let me show you something
    

    View Slide