https://github.com/donavon/styled-units

You might want to try https://github.com/donavon/styled-shortcuts instead
https://github.com/donavon/styled-units

styled-components

Last synced: about 2 months ago
JSON representation

You might want to try https://github.com/donavon/styled-shortcuts instead

• Host: GitHub
• URL: https://github.com/donavon/styled-units
• Owner: donavon
• License: mit
• Created: 2017-07-10T17:26:41.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-07-11T03:21:11.000Z (over 8 years ago)
• Last Synced: 2025-07-01T08:43:18.447Z (3 months ago)
• Topics: styled-components
• Language: JavaScript
• Homepage:
• Size: 8.79 KB
• Stars: 14
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# styled-units 💅

[![Build Status](https://travis-ci.org/donavon/styled-units.svg?branch=master)](https://travis-ci.org/donavon/styled-units)

[![npm version](https://img.shields.io/npm/v/styled-units.svg)](https://www.npmjs.com/package/styled-units)

[![Coverage Status](https://coveralls.io/repos/github/donavon/styled-units/badge.svg?branch=master)](https://coveralls.io/github/donavon/styled-units?branch=master)

TL;DR

* Provides convenient unit property helper functions that go hand-in-hand with

[`styled-components`](https://www.npmjs.com/package/styled-components) 💅

* Small footprint with **No Dependencies**!

* For example, instead of doing this:

  ```js

  width: ${({ percent }) => `${percent}%`};

  ```

  you do this:

  ```js

  width: ${pct('percent')};

  ```

## Install

```bash

$ npm i --save styled-units

```

## Usage:

```js

import styled from 'styled-components';

import { em, px, pct } from 'styled-units';

const Button = styled.button`

  padding: ${em('padding')};

  border-radius: ${px('borderRadius')};

  width: ${pct('width')};

`;

Button.defaultProps = {

  padding: 1,

  borderRadius: 4,

  width: 100,

};

```

Then use it like this.

```js

Press Me

```

## API

Supported "units":

| Function  | Description |

| --------- | ----------- |

| `px` |  Returns the property specified with the "px" suffix |

| `em` |  Returns the property specified with the "em" suffix |

| `rem` |  Returns the property specified with the "rem" suffix |

| `pct` |  Returns the property specified with the "%" suffix |

| `vw` |  Returns the property specified with the "vw" suffix |

| `vh` |  Returns the property specified with the "vh" suffix |

| `prop` | Returns the property specified "as-is" |

## Live

Check out this live example on [CodeSandbox](https://codesandbox.io/s/oYpNjXmWN).