# styled-system-booleans

> enable a boolean-style prop syntax for styled-system components

Latest version **1.0.3** (published 2019-11-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install styled-system-booleans
pnpm add styled-system-booleans
yarn add styled-system-booleans
bun add styled-system-booleans
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2019-11-25 |
| First published | 2019-11-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Paul Petrocco |
| Maintainers | polypants |
| Keywords | styled-system, react, css-in-js, styled-components, emotion |

## Links

- npm: https://www.npmjs.com/package/styled-system-booleans
- npm.io page: https://npm.io/package/styled-system-booleans

## 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.0.3 (latest) — 2019-11-25
- 1.0.2 — 2019-11-25
- 1.0.1 — 2019-11-25
- 1.0.0 — 2019-11-25

## README

# An extension library for `styled-system`

To add to the CSS based `props` of `styled-system`, `styled-system-booleans` enables `props` that represent a set of CSS properties and values.

## Some examples

Instead of

```html

<!-- "vanilla" styled-system -->
<Boop
  display="flex"
  flexDirection={['column', 'row']}
  justifyContent={[null, null, 'center']}
>
  ...
</Boop>

```

You could do something like

```html

<Boop
  flex
  column
  row={[false, true]}
  justifyCenter={[false, false, true]}
>
  ...
</Boop>

```

or

```html

<Boop
  flex
  column
  row="1"
  justifyCenter="2"
>
  ...
</Boop>

```

The configuration for the above example would look like this:

```javascript

import styled from 'fav-styled-component-library-here'
import { layout, flexbox, compose } from 'styled-system'
import convertProps from 'styled-system-booleans'

const config = {
  flex: { display: 'flex' },
  row: { flexDirection: 'row' },
  column: { flexDirection: 'column' },
  justifyCenter: { justifyContent: 'center' }
}

const Boop = styled.div.attrs(props => ({
  ...convertProps(config, props)
}))`
  ${compose(layout, flexbox)}
`

```

## More Info

`styled-system-booleans` converts the component's props into the ones `styled-system` knows. The config object's keys are the prop names you want to enable and it's values are objects of the CSS properties you want to apply when that prop is used. The resulting props can then be used in a few different ways: as a `Boolean`, as an `Array` or `Object`, or as a `String`.

`Boolean`: By using the property as a boolean (without a value) it applies the prop's associated CSS to the component without media queries.

`Array || Object`: Passing in an array or object to the prop means the keys will map to the breakpoints provided, like how they would with `styled-system`. Only instead of the values of this passed in array or object being the desired CSS value, they are instead tested for their falsy/ truthiness. Any truthy value will set the property, and any falsy value will be ignored. The examples favor `true` and `false`, though `1`s and `0`s could also be used.

`String`: The above syntax can be a little verbose and so a string syntax is included as a sorter alternative. With a string value you only need to provide the keys of the array or object breakpoints you would like the property to be active at. Spaces are used separate the keys. So `example={[false, true, false, true]}` and `example={{ sm: true, lg: true }}` would convert to `example="1 3"` and `example="sm lg"`.

## Functions as CSS values

`styled-system-booleans` also supports functions as CSS property values in the config object.

```html

<Boop
  customBorder={[4, 10, 18]}
  fixed={[{ x: 0 }, { t: 0 }]}
>
  ...
</Boop>

```

```javascript

import styled from 'fav-styled-component-library-here'
import { border, layout, compose } from 'styled-system'
import convertProps from 'styled-system-booleans'

const getValue = array => array.find(v => v !== undefined)

const config = {
  customBorder: {
    border: (key, property) => `${property[key]}px solid green`
  },
  fixed: {
    position: (key, property) => property === true || key === 0) && 'fixed',
    top: (key, property) => getValue([property[key].t, property[key].y, property[key].edges, null]),
    right: (key, property) => getValue([property[key].r, property[key].x, property[key].edges, null]),
    bottom: (key, property) => getValue([property[key].b, property[key].y, property[key].edges, null]),
    left: (key, property) => getValue([property[key].l, property[key].x, property[key].edges, null]),
    zIndex: (key, property) => getValue([property[key].z, null]),
  }
}

const Boop = styled.div.attrs(props => ({
  ...convertProps(config, props)
}))`
  ${compose(border, layout)}
`

```

With functions you have more control over what happens with the prop values. Functions provided as CSS values in the config object run once for each `key` of `breakpoints`. The following parameters are passed into these functions:
  1. The current `key` of `breakpoints`
  2. The prop's `value`
  3. The `props` object from the component

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