styled-components-2rem/README.md

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

# styled-components-2rem ✨

Extension of [styled-components](https://www.styled-components.com/) with features for convert `px` to `rem` units.

Check the documentation at [styled-components.com/docs](https://www.styled-components.com/docs) for more information about using styled-components!

## Contents

-   [Use Caution](#use-caution)
-   [Inspiration](#inspiration)
-   [Features](#features)
-   [Installation](#installation)
-   [Usage](#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!

1. copy [index.js](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](https://github.com/hnzycfcfed/styled-px2vw), without which there would be no such the `styled-components-2rem`.

## Features

-   Suitable for mobile
-   Supports [Adapting based on props](https://www.styled-components.com/docs/basics#adapting-based-on-props)
-   Supports [Extending Styles](https://www.styled-components.com/docs/basics#extending-styles)
-   Supports [.attrs constructor](https://www.styled-components.com/docs/api#attrs)

## Installation

yarn:

```bash
yarn add styled-components-2rem
```

npm:

```bash
npm i --save styled-components-2rem
```

## Usage

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

```javascript
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

```javascript
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;
`
```