# simple-props

> A fairly minimal style-props library for CSS-in-JS libraries or inline-styles powered by CSS Variables (Custom Properties).

Latest version **0.5.0** (published 2021-01-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install simple-props
pnpm add simple-props
yarn add simple-props
bun add simple-props
```

## Health

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

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

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2021-01-21 |
| First published | 2021-01-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 24.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Matt Hamlin |
| Maintainers | matthamlin |

## Links

- npm: https://www.npmjs.com/package/simple-props
- Repository: git@github.com:ds-pack/simple-props
- npm.io page: https://npm.io/package/simple-props

## Recent versions

- 0.5.0 (latest) — 2021-01-21
- 0.4.2 — 2021-01-21
- 0.4.1 — 2021-01-21
- 0.4.0 — 2021-01-20
- 0.3.0 — 2021-01-20
- 0.2.0 — 2021-01-18
- 0.1.0 — 2021-01-17
- 0.0.1 — 2021-01-16

## README

# `simple-props`

A fairly minimal style-props library for CSS-in-JS libraries or inline-styles
powered by CSS Variables (Custom Properties).

## Installation:

```sh
yarn add simple-props
```

## Usage:

```tsx
import createSimpleProps from 'simple-props'

let simpleProps = createSimpleProps({
  props: {
    // color="primary" // => color: var(--color-primary)
    color: true,
    // bg="primary" // => backgroundColor: var(--color-primary)
    bg: {
      property: 'backgroundColor',
      scale: 'color',
    },
  },
  pseudoProps: {
    _hover: '&:hover',
    _focus: '&:focus',
  },
})

// Either pull in your favorite CSS-in-JS library...
import styled from 'styled-components'

let Box = styled('div')(simpleProps)

// or roll your own with inline-styles:
function Box(props) {
  let styles = simpleProps(props)
  return <div {...props} style={styles} />
}

// or use it to generate styles staticly:
let styles = simpleProps({
  _focus: {
    // $primary will reference a css variable
    color: '$primary',
    // tomato will be output as the raw value
    bg: 'tomato',
  },
  _hover: {
    color: '$secondary',
  },
  bg: 'white',
})
```

Supports:

- Generating static styles
- Pseudo-props for pseudo selectors
- Responsive prop values for different values at different breakpoints

### Tools:

- Typescript
- Babel
- Jest

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