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:you do this:width: $ `%`;width: $;
Install
$ npm i --save styled-units
Usage:
;; const Button = styledbutton` padding: ; border-radius: ; width: ;`; ButtondefaultProps = 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.