# flexible-styled-components-modifiers

> ### Example

Latest version **0.0.3** (published 2019-06-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install flexible-styled-components-modifiers
pnpm add flexible-styled-components-modifiers
yarn add flexible-styled-components-modifiers
bun add flexible-styled-components-modifiers
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2019-06-07 |
| First published | 2019-06-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kseniya |
| Maintainers | kaprisa57 |

## Links

- npm: https://www.npmjs.com/package/flexible-styled-components-modifiers
- npm.io page: https://npm.io/package/flexible-styled-components-modifiers

## Recent versions

- 0.0.3 (latest) — 2019-06-07
- 0.0.2 — 2019-06-07
- 0.0.1 — 2019-06-07

## README

## Modifiers for styled components

### Example

```js
import applyStyleModifiers from 'flexible-styled-components-modifiers';
import styled from 'styled-components';

/* 
    globalModifiers - modifiers that will be applied for all components,
    which uses applyStyleModifiersWithGlobal
 */

const globalModifiers = {
  m: {
      prop: 'margin',
      values: {
          '': 'margin',
          t: 'margin-top',
          b: 'margin-bottom',
          r: 'margin-right',
          l: 'margin-left'
      }
  },
  p: 'padding: ',
  flex: 'flex: ',
  w: 'width: ',
  h: 'height: ',
  color: (props, value) => `background-color: ${props.theme[value] || value};`,
  fontColor: (props, value) => `color: ${props.theme[value] || value};`
}

const applyStyleModifiersWithGlobal = applyStyleModifiers(globalModifiers)

/*
    Pay attention to the package flexible-styled-flex
*/

const flexModifiers = {
    jc: {
        prop: 'justify-content',
        values: {
            c: 'center',
            sb: 'space-between',
            sa: 'space-around',
            fe: 'flex-end',
            fs: 'flex-start',
        },
    },
    ai: {
        prop: 'align-items',
        values: {
            s: 'stretch',
            c: 'center',
            b: 'baseline',
            fs: 'flex-start',
            fe: 'flex-end',
        },
    },
    fd: {
        prop: 'flex-direction',
        values: {
            c: 'column',
            r: 'row',
            rr: 'row-reverse',
            cr: 'column-reverse',
        },
    },
    fww: 'flex-wrap: wrap;'
}

const applyFlexModifiers = applyStyleModifiersWithGlobal(flexModifiers);

const Flex = styled.div`
    display: flex;
    ${applyFlexModifiers}
`

const MyComponent = <Flex jcc aic w="100px">;

/*
    MyComponent = styled.div`
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
    `
 */
```

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