styled-components-2rem ✨

Extension of styled-components with features for convert px to rem units.

Check the documentation at styled-components.com/docs for more information about using styled-components!

Contents

• Use Caution
• Inspiration
• Features
• Installation
• Usage

Use Caution

We suposse 100px = 1rem when screen width is 750px, so 750px would be 7.5rem.

When the screen width is 375px, like iPhone 6, the font-size in html tag should be 50px, still, 7.5rem would be 375px, which equals to the screen width.

So in case you need to hack it, here is what you need to do:

1. install styled-components module. This is required!

2. copy index.js to your project as a third-party module.

1. Use it in the same way as written below.

Inspriation

Inspired by styled-px2vw, without which there would be no such the styled-components-2rem.

Features

• Suitable for mobile
• Supports Adapting based on props
• Supports Extending Styles
• Supports .attrs constructor

Installation

yarn:

yarn add styled-components-2rem

npm:

npm i --save styled-components-2rem

Usage

Just change module styled-components to styled-components-2rem.

import styled, { keyframes, ... } from 'styled-components';
 
const keyFrame = keyframes`
  0% {
    width: 100px;
    background: yellow;
  }
  100% {
    width: 400px;
    background: purple;
  }
`;
 
export default Box = styled.div`
  display: inline-block;
  height: 200px;
  margin-bottom: 50px;
  color: #fff;
  line-height:200px;
  font-size: ${props => props.large ? '50px' : '30px'};
  transition: transform 300ms ease-in-out;
  animation: ${keyFrame} 2s ease-in-out 0s infinite;
`

to

import styled, { keyframes, ... } from 'styled-components-2rem';
 
const keyFrame = keyframes`
  0% {
    width: 100px;
    background: yellow;
  }
  100% {
    width: 400px;
    background: purple;
  }
`;
 
export default Box = styled.div`
  display: inline-block;
  height: 200px;
  margin-bottom: 50px;
  color: #fff;
  line-height:200px;
  font-size: ${props => props.large ? '50px' : '30px'};
  transition: transform 300ms ease-in-out;
  animation: ${keyFrame} 2s ease-in-out 0s infinite;
`