styled-units

1.1.3 • Public • Published

styled-units 💅

Build Status npm version Coverage Status

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.

Package Sidebar

Install

npm i styled-units

Weekly Downloads

4

Version

1.1.3

License

MIT

Last publish

Collaborators

  • donavon