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.