# reactcss

> Bringing Classes to Inline Styles

Latest version **1.2.3** (published 2017-09-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install reactcss
pnpm add reactcss
yarn add reactcss
bun add reactcss
```

## Health

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

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

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.3 |
| Published | 2017-09-07 |
| First published | 2015-06-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/reactcss) |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1576 |
| Author | case |
| Maintainers | case |
| Keywords | react, reactcss |

## Links

- npm: https://www.npmjs.com/package/reactcss
- Repository: https://github.com/casesandberg/reactcss
- Homepage: https://github.com/casesandberg/reactcss#readme
- Issues: https://github.com/casesandberg/reactcss/issues
- npm.io page: https://npm.io/package/reactcss

## Dependencies (1)

- [lodash](https://npm.io/package/lodash.md) ^4.0.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.3 (latest) — 2017-09-07
- 0.4.6 (beta) — 2016-05-27
- 1.2.2 — 2017-03-07
- 1.2.1 — 2017-03-05
- 1.2.0 — 2017-03-05
- 1.1.1 — 2016-11-19
- 1.1.0 — 2016-11-13
- 1.0.9 — 2016-10-08
- 1.0.8 — 2016-09-22
- 1.0.7 — 2016-08-31
- 1.0.6 — 2016-08-08
- 1.0.5 — 2016-07-26
- 1.0.4 — 2016-06-21
- 1.0.3 — 2016-06-09
- 1.0.2 — 2016-06-07
- … 11 more at https://npm.io/package/reactcss/versions

## README

# [ReactCSS](http://reactcss.com/)

[![Build Status][travis-svg]][travis-url]
[![dependency status][deps-svg]][deps-url]
[![dev dependency status][dev-deps-svg]][dev-deps-url]
[![License][license-image]][license-url]
[![Downloads][downloads-image]][downloads-url]

## Inline Styles in JS with support for [React](http://reactcss.com/#react), [React Native](http://reactcss.com/#react-native), [Autoprefixing](http://reactcss.com/#autoprefixing), [Hover](http://reactcss.com/#hover), [Pseudo-Elements](http://reactcss.com/#pseudo-elements) & [Media Queries](http://reactcss.com/#media-queries)

## Install

```
npm install reactcss --save
```

## Style Object

Define a default styles for your elements:
```javascript
import reactCSS from 'reactcss'

const styles = reactCSS({
  'default': {
    card: {
      background: this.props.background,
      boxShadow: '0 2px 4px rgba(0,0,0,.15)',
    },
  },
})
```

Pass style definitions via inline styles:
```javascript
<div style={ styles.card } />
```

## Activating Classes

Activate additional classes by passing down objects as additional parameters to `reactCSS`:
```javascript
const styles = reactCSS({
  'default': {
    card: {
      background: '#fff',
      boxShadow: '0 2px 4px rgba(0,0,0,.15)',
    },
  },
  'zIndex-2': {
    card: {
      boxShadow: '0 4px 8px rgba(0,0,0,.15)',
    },
  },
}, {
  'zIndex-2': props.zIndex === 2,
})
```

## Documentation
See the [Full Documentation](http://reactcss.com)

## Examples

Examples and projects built with reactCSS:

[Felony](https://github.com/henryboldi/felony) - Next Level PGP Desktop App
[React Color](https://github.com/casesandberg/react-color) - Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more
[Buffer App Components](https://www.npmjs.com/package/@bufferapp/components) - A shared set of UI Components
[React Reactions](https://github.com/casesandberg/react-reactions) - Use Reactions from Slack, Facebook, Pokemon, Github and Youtube


[travis-svg]: https://travis-ci.org/casesandberg/reactcss.svg
[travis-url]: https://travis-ci.org/casesandberg/reactcss
[deps-svg]: https://david-dm.org/casesandberg/reactcss.svg
[deps-url]: https://david-dm.org/casesandberg/reactcss
[dev-deps-svg]: https://david-dm.org/casesandberg/reactcss/dev-status.svg
[dev-deps-url]: https://david-dm.org/casesandberg/reactcss#info=devDependencies
[npm-badge-png]: https://nodei.co/npm/reactcss.png?downloads=true&stars=true
[license-image]: http://img.shields.io/npm/l/reactcss.svg
[license-url]: LICENSE
[downloads-image]: http://img.shields.io/npm/dm/reactcss.svg
[downloads-url]: http://npm-stat.com/charts.html?package=reactcss

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