https://github.com/donavon/styled-shortcut-components

A convenience package that wraps styled-components with styled-shortcuts.
https://github.com/donavon/styled-shortcut-components

styled-components styled-shortcuts

Last synced: about 1 month ago
JSON representation

A convenience package that wraps styled-components with styled-shortcuts.

• Host: GitHub
• URL: https://github.com/donavon/styled-shortcut-components
• Owner: donavon
• License: mit
• Created: 2017-07-18T15:24:26.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-01-18T15:12:58.000Z (almost 3 years ago)
• Last Synced: 2024-11-02T12:25:33.589Z (about 2 months ago)
• Topics: styled-components, styled-shortcuts
• Language: JavaScript
• Homepage:
• Size: 4.88 KB
• Stars: 13
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Styled Shortcut Components 💅

[![Build Status](https://travis-ci.org/donavon/styled-shortcut-components.svg?branch=master)](https://travis-ci.org/donavon/styled-shortcut-components)

[![npm version](https://img.shields.io/npm/v/styled-shortcut-components.svg)](https://www.npmjs.com/package/styled-shortcut-components)

[![Coverage Status](https://coveralls.io/repos/github/donavon/styled-shortcut-components/badge.svg?branch=master)](https://coveralls.io/github/donavon/styled-shortcut-components?branch=master)

TL;DR

* A convenience package that wraps

[Styled Components](https://www.npmjs.com/package/styled-components) 💅

with

[Styled Shortcuts](https://www.npmjs.com/package/styled-shortcuts)

so you can do this:

  ```js

  font-size: ${'fontSize:px'};

  ```

  instead of this:

  ```js

  font-size: ${({ fontSize }) => `${fontSize}px`};

  ```

## Install

```bash

$ npm i --save styled-shortcut-components

```

## Usage

All you need to do to get the power of Styled Shortcuts is change your `import` from this:

```js

import styled from 'styled-components';

```

to this:

```js

import styled from 'styled-shortcut-components';

```

See

[Styled Components](https://www.styled-components.com/)

and [Styled Shortcuts](https://www.npmjs.com/package/styled-shortcuts)

for complete details.