Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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!

    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