styled-units 💅

TL;DR

• Provides convenient unit property helper functions that go hand-in-hand with styled-components 💅
• Small footprint with No Dependencies!
• For example, instead of doing this:

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

  you do this:

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

Install

$ npm i --save styled-units

Usage:

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.

<Button borderRadius={5} padding={3}>Press Me</Button>

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.