joyent-portal/packages/styled-is
2017-06-22 11:46:54 +01:00
..
src chore: restore removed packages 2017-06-16 21:46:36 +01:00
test chore: restore removed packages 2017-06-16 21:46:36 +01:00
.eslintignore chore: restore removed packages 2017-06-16 21:46:36 +01:00
.eslintrc chore: restore removed packages 2017-06-16 21:46:36 +01:00
.tern-project chore: restore removed packages 2017-06-16 21:46:36 +01:00
CHANGELOG.md chore: restore removed packages 2017-06-16 21:46:36 +01:00
package.json feat(eslint-config-joyent-portal): don't lint anything prettier related 2017-06-22 11:46:54 +01:00
README.md chore: restore removed packages 2017-06-16 21:46:36 +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