Skip to content

casesandberg/reactcss

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

About

💄 Inline Styles in JS

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 13