Get #Amazon #Prime for this #holiday #amazonprime #christmas #2019

#styled-components - #JavaScript #ES6 to write #CSS for #Reactjs and #ReactNative components

Styled-components

Styled-components is a way to write CSS - Cascading Style Sheets using JavaScript ES6 for Reactjs and React Native components.

Styled-components
Styled-components homepage


How to install

npm install --save styled-components


Or including the following script in your html file
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>

4 Benefits of using styled-components 

These are the benefits that I have realized after starting using styled-components.
1) CSS reuse
You can save a set of CSS as a variable and reuse it. For example, I styled <a> tag and able to reuse it in a React template or extend the style for a component.


Styling an <a> tag

import { green, themeColor } from ‘./colors';
import styled from 'styled-components';

export const UnderlineA = styled.a`
  cursor: pointer;
  text-decoration: none;
  color: ${themeColor};
  
  span {
    position: relative;
    display: inline-block;
    
    i {
      padding: 0 5px;
    }
  }
  
  span:after {
    position: absolute;
    content: "";
    height: 2px;
    width: 100%;
    bottom: -5px;
    left: 0;
    background: ${green};
    // transform-origin: 0%;
    transform: scaleX(0);
    transition: transform 0.3s ease-out;
  }
  
   &:hover {
      span:after {
        transform: scaleX(1);
        transition: transform 0.3s ease-out;   
      }
      
      i {
        color: ${green}
      }
    }
`;

Using UnderlineA in CSS file of another component to extend the style

export const ContactURL = styled(UnderlineA)`
  font-size: 1.3em;
  ${media.desktop`
    font-size: 1.1em;
  `}
`;

2) Simplify reusing of media query
You can have another media variable for min-width as well.

import { css } from 'styled-components';

const sizes = {
  phone: 376,
  tablet: 768,
  desktop: 992,
  larger: 1170
};

export const media = Object.keys(sizes).reduce((accumulator, label) => {
  const emSize = sizes[label] / 16
  accumulator[label] = (...args) => css`
    @media (max-width: ${emSize}em) {
      ${css(...args)}
    }
  `
  return accumulator
}, {})

You can then use it as so

export const SpecialContact = styled(contact)`
  color: red
  ${media.desktop`
    color: tomato
  `}
`;


export const Container = styled(Div)`
  margin-top: 10vh;
  padding-left: 60px;
  padding-right: 60px;
  ${media.tablet`
    margin-top: 7vh;  
    padding-left: 20px;
    padding-right: 20px;
  `},
  ${media.phone`
    margin-top: 7vh;  
    padding-left: 10px;
    padding-right: 10px;
  `},
`;

3)You can use component props to toggle CSS


Example 1: using props to toggle CSS

render() {
  return (
    <NetworkContainer
      row
      justify={'center'}
      align={'center'}
      doBounce={this.props.doBounce}
    >
      {this.renderContactList()}
    </NetworkContainer>
  );
}

export const NetworkContainer = styled(Flex)`
  transition: color .3s;
  
  i {
    text-align: center
  }
  
  div {
   display: inline-block;
   padding-left: 7px;
   padding-right: 7px;
  }
  
  ${({doBounce}) => doBounce && css`
    div {
      animation: ${bounce} 1.4s ease-out 0.7s;
    }       
  `}
`;

Example 2:  using props to set CSS value
render() {
  return (
    <ScrollUpButtonContainer
      show={this.props.show? 1 : 0}
      translate={this.props.show? '-20%' : '20%'}
      onClick={() => this.scrollToTop()}>
      <FontAwButton class={'fa fa-angle-double-up'}/>
    </ScrollUpButtonContainer>
  );
}

export const ScrollUpButtonContainer = styled.div`
  opacity: ${({show}) => show || 0};
  transform: ${({translate}) => `translateY(${translate})`};
  transition: transform 0.5s ease-in-out, opacity 0.5s ease;
`;


height: ${({shrink}) => shrink ? `2.7em` : `3em`};
OR
${({shrink}) => shrink ? css`flex-shrink: ${shrink};`: null}

4) You can theme your application.

This is taken from their example as I haven't used theming yet.
Define your theme colors
// colors.js

const colors = {
  main:  '#393276',
  dark:  '#0D083B',
  light: '#837EB1'
}

export default colors

Apply your theme with ThemeProvider
import { ThemeProvider } from 'styled-components';
import colors from './colors' // from Step #1

const App = props =>
  <ThemeProvider theme={colors}>
    {props.children}
  </ThemeProvider>

Create an importable theme object using styled-components-theme
// theme.js

import createTheme from 'styled-components-theme';
import colors from './colors' // from Step #1

const theme = createTheme(...Object.keys(colors))
export default theme

Use the theme colors in your components

import styled from 'styled-components'
import theme from './theme' // from Step #3

const Header = styled.div`
  background: ${theme.dark};
  color: ${theme.light};
`

const Button = styled.button`
  background-image: linear-gradient(${theme.light}, ${theme.light.darken(0.3));
  color: ${theme.dark};
  padding: 10px;
`

Check out styled-component documentation.
You can also check out their tips on how to use styled-components more efficiently.

Thanks for reading!

Jun