Lightning Talk for Reactive Conference 2016. A lot to tell in just five minutes. Feel free to ping me if you need it.
hi!
View Slide
name=`Javi Velasco`company=`Audiense`twitter=`@javivelasco`sideProject=`www.react-toolbox.com`/>
smart social intelligence
bootstrap your application with beautiful material design componentsreact toolbox
or why the f*** did you build this thing?what’s special about it?
but still there are other issues…benefits of traditional css.
configuration customization theming
really painful stuff…configuration
also configuring webpack is not easy we can’t force people to use any tool
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);
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);
import React from 'react';import Button from 'react-toolbox/lib/button/Button';const theme = {button: 'button',icon: 'icon'};const RTButton = ({ ...props }) => ();export default RTButton;
github.com/javivelasco/react-css-themrreact-css-themr
higher order componentprovider
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));
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'));
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'));
once configured it is really convenienti wanna keep implicit css requires!
// Button/index.jsimport { themr } from 'react-css-themr';import Button from './Button.js';import theme from './theme.css';export default themr('RTButton', theme)(Button);
dependencies should come with css tooyou should decorate once
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 };
// Button/index.jsimport { 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);
it’s still just csscustomization
there is kind of an api of classnamesit’s a well-known set of propertiesyou can pass your own!but just what you need
.button {background: blue}.icon {color: red;}
import React from 'react';import Button from 'react-toolbox/lib/button';import theme from './custom.css';export default props =>;
themr builds classnames for youyou still deal with selector priorities but it's pretty much working
¯\_(ツ)_/¯
with postcss propertiestheming
react-toolbox is shipped with css variablesworks in modern browsers (not ie)so maybe you need to transform the css
but it’s awesome!we are shipping a script to build your themesno need to setup, just run the scriptyou’ll get your custom theme.css and theme.js
this is running in the browserlet me show you something