sm

styled-mixin

Simple wrapper for creating styled-components mixins

Showing:

Popularity

Downloads/wk

6

GitHub Stars

16

Maintenance

Last Commit

4yrs ago

Contributors

1

Package

Dependencies

1

Size (min+gzip)

22.6KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

STOP.

just read new styled-components docs now ;)

styled-mixin Build Status

Super simple wrapper for creating styled-components mixins. Perhaps more human-readable syntax for overwrite rules

Install

npm i --save styled-mixin

Usage

Basic


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

import createMixin from 'styled-mixin/native';

if you need react-native mode.

Animations

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


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;
`);
<Button tomato>Tomato!!!</Button>

It's nestable

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100