@nbfe/reactcss v0.2.0

ReactCSS

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