# styled-is

> Flag utility for styled-components

Latest version **1.3.0** (published 2019-04-14) · MPL-2.0 license · 0 weekly downloads

## Install

```sh
npm install styled-is
pnpm add styled-is
yarn add styled-is
bun add styled-is
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2019-04-14 |
| First published | 2017-05-18 |
| Weekly downloads | 0 |
| License | MPL-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 371.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 209 |
| Maintainers | ramitos, saravieira |
| Keywords | flag, flags, react, css, css-in-js, styled-components |

## Links

- npm: https://www.npmjs.com/package/styled-is
- Repository: https://github.com/yldio/styled-is
- Homepage: https://github.com/yldio/styled-is#readme
- Issues: https://github.com/yldio/styled-is/issues
- npm.io page: https://npm.io/package/styled-is

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.3.0 (latest) — 2019-04-14
- 1.2.2 — 2019-03-14
- 1.2.1 — 2019-03-12
- 1.2.0 — 2019-03-06
- 1.1.5 — 2018-07-23
- 1.1.4 — 2018-07-23
- 1.1.3 — 2018-04-06
- 1.1.2 — 2018-01-29
- 1.1.1 — 2018-01-29
- 1.1.0 — 2017-10-10
- 1.0.16 — 2017-10-09
- 1.0.15 — 2017-10-09
- 1.0.14 — 2017-09-21
- 1.0.12 — 2017-09-21
- 1.0.11 — 2017-06-10
- … 11 more at https://npm.io/package/styled-is/versions

## README

# styled-is

[![npm](https://img.shields.io/npm/v/styled-is.svg?style=flat-square)](https://www.npmjs.com/package/styled-is)
[![License: MPL 2.0](https://img.shields.io/badge/License-MPL%202.0-brightgreen.svg?style=flat-square)](https://opensource.org/licenses/MPL-2.0)
[![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-green.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)
[![Greenkeeper badge](https://img.shields.io/badge/greenkeeper-enabled-brightgreen.svg?style=flat-square)](https://greenkeeper.io/)

[![David](https://img.shields.io/david/dev/yldio/styled-is.svg?style=flat-square)](https://david-dm.org/yldio/styled-is?type=dev)
[![David](https://img.shields.io/david/peer/yldio/styled-is.svg?style=flat-square)](https://david-dm.org/yldio/styled-is?type=peer)

Flag utility for [`styled-components`](https://github.com/styled-components/styled-components).

## Table of Contents

- [Install](#install)
- [Usage](#usage)
- [Examples](#examples)
- [License](#license)

## Install

```
yarn add styled-is
```

## Usage

`is, isNot, isOr, isSomeNot` are used for boolean props and can check one or more props at a time `is(prop1, prop2, ...)`.

`match` is used to check the value of a prop `match(prop, value)`.

Functions can also be passed to all of the above to allow for more complex prop-checking. Any functions passed in will automatically be called with the component's props. For example if you wanted to handle a button with only an icon differently for different sizes:

```js
${match("size", "large")`
      font-size: 12px;
      ${props =>
        props.icon && !props.content
          ? `width: 3rem;`
          : `min-width: 6rem;`}
    `};

${match("size", "small")`
      font-size: 9px;
      ${props =>
        props.icon && !props.content
          ? `width: 1.5rem;`
          : `min-width: 3rem;`}
    `};
```

## Examples

```js
import is, { isNot, isOr, isSomeNot, match } 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;
  `};

  ${match('size', 'large')`
    height: 64px;
  `};

  ${is('green')`
    background-color: green;
    ${props => (props.size === 'small' ? `width: 3rem;` : `width: 6rem;`)}
  `};
`;
```

```js
// 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>

// display: block;
// opacity: 0;
// background-color: red;
// opacity: 1;
// float: left;
// position: relative;
// height: 64px;
<Div red left size='large'>

// display: block;
// opacity: 0;
// float: center;
// wat: 1;
// background-color: green;
// width: 6rem;
<Div green>

// display: block;
// opacity: 0;
// float: center;
// wat: 1;
// background-color: green;
// width: 3rem;
<Div green size='small'>

```

## License

MPL-2.0

---
_Source: https://npm.io/package/styled-is · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._