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":

Live

Check out this live example on CodeSandbox.