Skip to content

casesandberg/reactcss

Folders and files

NameName
Last commit message
Last commit date

Latest commit

038868f Â· Sep 7, 2017
Apr 25, 2017
Aug 8, 2016
Mar 7, 2017
Mar 5, 2017
Mar 5, 2017
May 19, 2016
Mar 5, 2017
Sep 22, 2016
Sep 7, 2017
Sep 22, 2016
Jun 25, 2015
Nov 13, 2016
Mar 7, 2017
Mar 5, 2017
Mar 5, 2017

Repository files navigation

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