https://github.com/donavon/styled-shortcuts
Provides convenient props shortcut helper for Styled Components 💅
https://github.com/donavon/styled-shortcuts
styled-components
Last synced: about 1 month ago
JSON representation
Provides convenient props shortcut helper for Styled Components 💅
- Host: GitHub
- URL: https://github.com/donavon/styled-shortcuts
- Owner: donavon
- License: mit
- Created: 2017-07-11T21:07:03.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-14T16:50:22.000Z (almost 7 years ago)
- Last Synced: 2024-10-12T08:11:18.770Z (7 months ago)
- Topics: styled-components
- Language: JavaScript
- Homepage:
- Size: 51.8 KB
- Stars: 88
- Watchers: 2
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Styled Shortcuts 💅
[](https://travis-ci.org/donavon/styled-shortcuts)
[](https://www.npmjs.com/package/styled-shortcuts)
[](https://coveralls.io/github/donavon/styled-shortcuts?branch=master)
TL;DR
* Now with **Theme Support**!
* Provides convenient props shortcut helper for
[Styled Components](https://www.npmjs.com/package/styled-components) 💅
* Small footprint with **No Dependencies**!
* With Styled Shortcuts you can now do this:
```js
font-size: ${'fontSize:px'};
```
instead of this:
```js
font-size: ${({ fontSize }) => `${fontSize}px`};
```
* Use any unit (e.g. `px`, `%`, `cm`, you name it) or no unit at all.
## Install
```bash
$ 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:
```js
import rawStyled from 'styled-components';
import shortcuts from 'styled-shortcuts';
const styled = shortcuts(rawStyled);
```
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`.
```js
// import styled from 'styled-components';
import styled from 'styled-shortcut-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:
```js
import styled from 'styled-shortcut-components';
const Button = styled.button`
padding: ${'padding:em'};
border-radius: ${'borderRadius:px'};
width: ${'width:%'};
color: ${'color'};
`;
Button.defaultProps = {
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:
```js
const Button = styled.button`
padding: 0.25em 1em;
border-radius: ${'theme.button.borderRadius:px'};
color: ${'theme.color'};
border: 2px solid ${'theme.color'};
`;
```
See the [Styled Components documentation](https://www.styled-components.com/docs/advanced#theming)
for complete details on how to enable theming.
## Do It Live!
Check out this live example on [CodeSandbox](https://codesandbox.io/s/jRE0XxR9v).
