Skip to content
💄 Inline Styles in JS
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Update intro.md to Pseudo-Classes (#140) Apr 25, 2017
modules Add polyfill for Object.assign (#79) Aug 8, 2016
src Fix Hover Export Mar 7, 2017
test Upgrade Tests to Jest Mar 5, 2017
.babelrc Change Lodash `map` Methods to `forOwn` Mar 5, 2017
.eslintignore Cleanup May 19, 2016
.eslintrc.js Upgrade Tests to Jest Mar 5, 2017
.gitignore Run `lib` on prepublish (#115) Sep 22, 2016
.npmignore Remove `.babelrc` from NPM Payload (#148) Sep 7, 2017
.travis.yml Only Send Travis Emails on Failure (#117) Sep 22, 2016
LICENSE Moved Jun 25, 2015
README.md Update Documentation And Add Examples (#136) Nov 13, 2016
package.json
webpack.dev.js Rename `reactcss.js` -> `index.js` Mar 5, 2017
webpack.prod.js Rename `reactcss.js` -> `index.js` Mar 5, 2017

README.md

ReactCSS

Build Status dependency status dev dependency status License Downloads

Inline Styles in JS with support for React, React Native, Autoprefixing, Hover, Pseudo-Elements & Media Queries

Install

npm install reactcss --save

Style Object

Define a default styles for your elements:

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:

<div style={ styles.card } />

Activating Classes

Activate additional classes by passing down objects as additional parameters to reactCSS:

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

Examples

Examples and projects built with reactCSS:

Felony - Next Level PGP Desktop App React Color - Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more Buffer App Components - A shared set of UI Components React Reactions - Use Reactions from Slack, Facebook, Pokemon, Github and Youtube

You can’t perform that action at this time.