joyent-portal/packages/styled-is
2017-05-25 13:47:44 +01:00
..
src chore: initial lerna setup 2017-05-25 10:56:50 +01:00
test chore: initial lerna setup 2017-05-25 10:56:50 +01:00
.eslintignore chore: initial lerna setup 2017-05-25 10:56:50 +01:00
.eslintrc chore: initial lerna setup 2017-05-25 10:56:50 +01:00
.tern-project chore: initial lerna setup 2017-05-25 10:56:50 +01:00
package.json chore: update dependencies 2017-05-25 13:47:44 +01:00
README.md chore: initial lerna setup 2017-05-25 10:56:50 +01:00
yarn.lock chore: update dependencies 2017-05-25 13:47:44 +01:00

styled-is

License: MPL 2.0 npm standard-readme compliant

Flag utility for styled-components.

Table of Contents

Install

yarn add --dev styled-is

Usage

import is, { isNot, isOr, isSomeNot } from 'styled-is';
import styled from 'styled-components';

const Div = styled.div`
  display: block;
  opacity: 0;
  
  ${is('red')`
    background-color: red;
  `};

  ${is('blue')`
    background-color: blue;
  `};

  ${is('red', 'blue')`
    opacity: 1;
  `};

  ${is('left')`
    float: left;
  `};

  ${is('right')`
    float: right;
  `};

  ${isNot('left', 'right')`
    float: center;
  `};

  ${isOr('left', 'right')`
    position: relative;
  `};

  ${isSomeNot('red', 'left')`
    wat: 1;
  `};
`;

// display: block;
// opacity: 0;
// float: center;
// wat: 1;
<Div>

// display: block;
// opacity: 0;
// background-color: red;
// opacity: 1;
// float: center;
// wat: 1;
<Div red>

// display: block;
// opacity: 0;
// background-color: red;
// opacity: 1;
// float: left;
// position: relative;
<Div red left>

License

MPL-2.0