💄 Inline Styles in JS
Alternatives To Reactcss
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Window14,5123571,492a month ago43April 17, 2023237mitJavaScript
React components for efficiently rendering large lists and tabular data
Css In Js5,194
3 years ago7mitJavaScript
React: CSS in JS techniques comparison
Qrcode.react3,4811,25484720 days ago26June 25, 202229otherTypeScript
A <QRCode/> component for use with React.
React Animations3,040
a year ago12mitJavaScript
🎊 A collection of animations for inline style libraries
Reactcss1,5743,8182314 years ago26September 07, 20176mitJavaScript
:lipstick: Inline Styles in JS
Awesome Editorjs1,486
9 days agocc0-1.0
🤩 A curated list of awesome Editor.js tools, libraries and resources.
React Html Email82048163 years ago15September 27, 201731mitJavaScript
Create elegant HTML email templates using React.
React Pdf Highlighter800142 months ago20March 22, 202277mitTypeScript
Set of React components for PDF annotation
Markdown In Js780
3 years ago15JavaScript
inline markdown for react/jsx
React Code Blocks51122112 days ago11June 13, 202128mitTypeScript
React code blocks and code snippet components
Alternatives To Reactcss
Select To Compare

Alternative Project Comparisons


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


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,


See the Full Documentation


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

Popular Inline Projects
Popular Reactjs Projects
Popular Text Processing Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Inline Styles