ReactCSS alternatives and similar libraries
Based on the "PostCSS" category
-
Atomizer
A tool for creating Atomic CSS, a collection of single purpose styling units for maximum reuse -
React Inline
Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e.g. the `className` prop of React elements. -
jTools - Javascript web components
jTools is a collection of lightweight common required javascript web components. It is composed of fully responsive javascript vanilla plugins to help you bring the best user experience to your projects, independent of the platform.
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest. Visit our partner's website for more details.
Do you think we are missing an alternative of ReactCSS or a related project?
|
Proactively identify front-end issues with easy-to-build synthetics tests. 14-day free trial.
More from our partner
|
Popular Comparisons
|
SaaSHub - Software Alternatives and Reviews
More from our team
|
README
ReactCSS
[
][license-url]
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
*Note that all licence references and agreements mentioned in the ReactCSS README section above
are relevant to that project's source code only.