reactcss

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

Similar packages

Other packages similar to reactcss

styled-components

Styled-components is a popular library for styling React components using tagged template literals. It allows for writing actual CSS to style components and supports dynamic styling based on props. Compared to ReactCSS, styled-components offers a more CSS-like syntax and is widely adopted in the React community.

emotion

Emotion is a performant and flexible CSS-in-JS library that allows you to style applications quickly with string or object styles. It provides a similar feature set to ReactCSS but with additional features like theming and server-side rendering support. Emotion is known for its performance and ease of use.

aphrodite

Aphrodite is a library for styling React components with JavaScript objects, similar to ReactCSS. It focuses on performance and provides features like media queries and pseudo-selectors. Aphrodite is less popular than styled-components and emotion but offers a straightforward API for styling components.