Styled Shortcuts 💅
TL;DR
- Now with Theme Support!
- Provides convenient props shortcut helper for Styled Components 💅
- Small footprint with No Dependencies!
- With Styled Shortcuts you can now do this:instead of this:font-size: $'fontSize:px';font-size: $ `px`;
- Use any unit (e.g.
px
,%
,cm
, you name it) or no unit at all.
Install
$ npm i --save styled-shortcuts
API
Here's the beauty... There's only one function! Styled Shortcut provides a higher order function that you use to wrap Styled Components, like this:
;; const styled = ;
And to make everyone's life easier, there's now a package that does this for you.
In fact, it is a direct replacement for styled-components
.
It imports both styled-components
and styled-shortcuts
and exports the wrapped styled
.
All you have to do is make a one-line change your components to import
from styled-shortcut-components
instead of styled-components
.
// import styled from 'styled-components';;
Usage
Any template string value is assumed to be a props
key.
For example, ${'color'}
will return the prop
named color
.
Your can also assign a "unit" suffix. It can be anything, such as px
, %
, em
, etc.
Simply separate the unit from the prop key with a colon.
For example ${'width:px'}
will return the width
prop with the "px" suffix.
See this example below:
; const Button = styledbutton` padding: ; border-radius: ; width: ; color: ;`; ButtondefaultProps = padding: 1 borderRadius: 4 width: 100 color: 'red';
Using with Themes
You can specify a props key that contains a dotted object notation.
For example:
const Button = styledbutton` padding: 0.25em 1em; border-radius: ; color: ; border: 2px solid ;`;
See the Styled Components documentation for complete details on how to enable theming.
Do It Live!
Check out this live example on CodeSandbox.