https://github.com/dimapaloskin/styled-mixin

Simple wrapper for creating styled-components mixins
https://github.com/dimapaloskin/styled-mixin

components javascript js styled-components

Last synced: about 2 months ago
JSON representation

Simple wrapper for creating styled-components mixins

• Host: GitHub
• URL: https://github.com/dimapaloskin/styled-mixin
• Owner: dimapaloskin
• License: mit
• Created: 2016-12-06T06:57:14.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-10-04T02:19:32.000Z (about 7 years ago)
• Last Synced: 2024-10-31T07:48:30.372Z (about 2 months ago)
• Topics: components, javascript, js, styled-components
• Language: JavaScript
• Size: 43 KB
• Stars: 17
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# STOP. 

## just read new styled-components docs now ;)

# styled-mixin [![Build Status](https://travis-ci.org/dimapaloskin/styled-mixin.svg?branch=master)](https://travis-ci.org/dimapaloskin/styled-mixin)

Super simple wrapper for creating styled-components mixins.

Perhaps more human-readable syntax for overwrite rules

## Install

```bash

npm i --save styled-mixin

```

## Usage

### Basic

```js

import styled from 'styled-component';

import createMixin from 'styled-mixin';

const tomatoColorMixin = createMixin`

  color: tomato;

`;

const Header = styled.h1`

  color: black;

  font-size: 20px;

`;

const Button = styled.button`

  color: black;

  border: none;

`;

const TomatoHeader = tomatoColorMixin(Header);

const TomatoButton = tomatoColorMixin(Button);

```

### React Native

Use 

```js

import createMixin from 'styled-mixin/native';

``` 

if you need react-native mode.

### Animations

```js

import styled, { keyframes } from 'styled-component';

import createMixin from 'styled-mixin';

const Header = styled.h1`

  color: black;

`;

const rotate360Keyframes = keyframes`

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(360deg);

  }

`;

const rotate = createMixin`

   animation: ${rotate360Keyframes} 2s linear infinite;

`;

const Uiiiii = rotate(Header);

```

### With props

```js

import styled from 'styled-component';

import createMixin from 'styled-mixin';

const blackOrTomatoMixin = createMixin`

  color: ${ props => props.tomato ? 'tomato' : 'black' };

`;

const Button = blackOrTomatoMixin(styled.button`

  border: none;

`);

```

```html

Tomato!!!

```

### It's nestable

```js

import styled from 'styled-component';

import createMixin from 'styled-mixin';

const Header = styled.h1`

  color: black;

`;

const tomatoColorMixin = createMixin`

  color: tomato;

`;

const fontSizeMixin = createMixin`

  font-size: 20px;

`;

const TomatoHeader = tomatoColorMixin(fontSizeMixin(Header));

```

#### Author

[Dmitry Pavlovsky](http://palosk.in)