<>styled-componentsMax Stoiber@mxstbrOpen Source Developer, Thinkmill
View Slide
The Component Age
1. Small, focussed components2. Use container componentsBest Practices: Components
Small, focussed components
Implementation detail!Implementation detail!
Split containers and components
class Sidebar extends React.Component {componentDidMount() {fetch('api.com/sidebar').then(res => {this.setState({items: res.items})});}render() {return ({this.state.items.map(item => ({item}))})}}
class SidebarContainer extends React.Component {componentDidMount() {fetch('api.com/sidebar').then(res => {this.setState({items: res.items})});}render() {return ({this.state.items.map(item => ())})}}
Containers = How things workComponents = How things look
What about styling?
1. Single-use classes2. Components as a stylingconstructBest Practices: Styling
If you’re writing React, youhave access to a morepowerful styling constructthan CSS class names. Youhave components.”– Michael Chan, @chantastic“
Enforcing best practices?
styled-components
Glen Maddernfrontend.center
Remove the mapping betweenstyles and components
import styled from 'styled-components';const Title = styled.h1`font-size: 1.5em;text-align: center;color: palevioletred;`;const Wrapper = styled.section`color: palevioletred;padding: 4em;width: 100%;height: 100%;background: papayawhip;`;
import styled from 'styled-components';const Title = styled.h1`font-size: 1.5em;text-align: center;color: palevioletred;`;const Wrapper = styled.section`color: palevioletred;padding: 4em;width: 100%;height: 100%;background: papayawhip;`;styled.h1
const App = () => (Hello World, this is my first styled component!);ReactDOM.render(,document.getElementById(‘#app'));
Write actual CSS
import styled from 'styled-components';const ColorChanger = styled.section`background: papayawhip;> h2 {color: palevioletred;}@media (min-width: 875px) {background: mediumseagreen;> h2 {color: papayawhip;}}`;
color-changer
Adapting based on props
NormalPrimary
const Button = styled.button`/* Adapt the colors based on primary prop */background: ${(props) =>props.primary ? 'palevioletred' : 'white'};color: ${(props) =>props.primary ? 'white' : 'palevioletred'};font-size: 1em;margin: 1em;padding: 0.25em 1em;border: 2px solid palevioletred;border-radius: 3px;`;export default Button;
Theming Built In
import { ThemeProvider } from 'styled-components';const theme = {primary: 'palevioletred',};const App = () => ();
import styled from 'styled-components';const Button = styled.button`/* Adjust background based on the theme */background: ${props => props.theme.primary};color: white;`;
const redTheme = {primary: 'palevioletred',};const blueTheme = {primary: 'mediumseagreen',};// …I'm red!I'm green!
I'm red!
I'm still red!
Full ReactNative Support
import styled from 'styled-components/native';const Wrapper = styled.View`background-color: papayawhip;flex: 1;justify-content: center;align-items: center;`;const Title = styled.Text`font-size: 20;text-align: center;margin: 10;color: palevioletred;font-weight: bold;`;
class StyledComponentsNative extends Component {render() {return (Hello World, this is my first native styled component!);}}
$ yarn add styled-componentsgithub.com/styled-components/styled-components$ npm install styled-components
Thank you!Max Stoiber@mxstbrCome talk to me!