# style-r

> CSS styling tool for React

Latest version **1.0.8** (published 2015-09-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install style-r
pnpm add style-r
yarn add style-r
bun add style-r
```

## 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.8 |
| Published | 2015-09-07 |
| First published | 2015-06-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | yes |
| Author | mozisan |
| Maintainers | mozisan |

## Links

- npm: https://www.npmjs.com/package/style-r
- Repository: https://github.com/mozisan/StyleR
- Homepage: https://github.com/mozisan/StyleR#readme
- Issues: https://github.com/mozisan/StyleR/issues
- npm.io page: https://npm.io/package/style-r

## Dependencies (5)

- [babel](https://npm.io/package/babel.md) ^5.4.7
- [lodash](https://npm.io/package/lodash.md) ^3.9.3
- [radium](https://npm.io/package/radium.md) ^0.12.2
- [pleeease](https://npm.io/package/pleeease.md) ^3.4.0
- [classnames](https://npm.io/package/classnames.md) ^2.1.2

## Recent versions

- 1.0.8 (latest) — 2015-09-07
- 1.0.7 — 2015-09-05
- 1.0.6 — 2015-06-09
- 1.0.5 — 2015-06-07
- 1.0.4 — 2015-06-06
- 1.0.3 — 2015-06-06
- 1.0.1 — 2015-06-05
- 0.0.1 — 2015-06-05

## README

# StyleR - Styler for React

```
npm install style-r
```

StyleR provides you yet another styling way in JS.

Use StyleR with [React](https://facebook.github.io/react/).

# Features
- Style mixin
- States (eg.`:hover`) supported
- Media queries supported
- Keyframes supported (using [Radium](http://projects.formidablelabs.com/radium/) util)
- Autoprefix (using [Radium](http://projects.formidablelabs.com/radium/) util)

# Usage

## Basic

### Define style

```as
var style = StyleR.define({
  display: 'block',
  marginTop: '30px',
  fontSize: '1.2em'
});
```

### Set `className` to HTML element

```as
render() {
  return (
    <p className={style.className()}>
      Lorem ipsum
    </p>
  );
}
```

## Using states

### Define style

```as
var style = StyleR.define({
  opacity: 0,
  transition: 'opacity .3s',
  ':hover': {
    opacity: 1
  }
});
```

### Set `className` to HTML element

```as
render() {
  return (
    <p className={style.className()}>
      Lorem ipsum
    </p>
  );
}
```

## Using `className` modifier

### Define style

```as
var style = StyleR.define({
  display: 'block',
  '.isHidden': {
    display: 'none'
  }
});
```

### Set `className` to HTML element

```as
render() {
  return (
    <p className={style.className({isHidden: this.state.isHidden})}>
      Lorem ipsum
    </p>
  );
}
```

## Using media queries

### Define style

```as
var style = StyleR.define({
  display: 'block',
  '@media screen and (max-width:320px)': {
    display: 'none'
  }
});
```

### Set `className` to HTML element

```as
render() {
  return (
    <p className={style.className()}>
      Lorem ipsum
    </p>
  );
}
```

### Also, you can generate media query
_**ES6 syntax**_

```as
var devices = {
  mobile: StyleR.mediaQuery({
    type: 'screen',
    maxWidth: '320px'
  }),
  desktop: StyleR.mediaQuery({
    type: 'screen',
    minWidth: '1050px'
  })
}

var style = StyleR.define({
  color: 'white',
  [devices.mobile]: {
    color: 'green'
  },
  [devices.desktop]: {
    color: 'blue'
  }
});
```

## Nesting style

### Define style

```as
var style = StyleR.define({
  color: 'white',
  opacity: 0,
  '.isFoo': {
    color: 'red'
  },
  '.isBar': {
    opacity: 1,
    '.isFoo': {
      color: 'yellow'
    }
  }
});
```

### Set `className` to HTML element

```as
render() {
  return (
    <p className={style.className({isFoo: state.isFoo, isBar: state.isBar})}>
      Lorem ipsum
    </p>
  );
}
```

## Keyframes
Same usage as [Radium](http://projects.formidablelabs.com/radium/).

```as
var keyframes = StyleR.keyframes({
  '0%': {width: '10%'},
  '50%': {width: '50%'},
  '100%': {width: '10%'}
});

var style = styleR.define({
  animation: keyframes + ' 3s ease 0s infinite'
});
```

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