Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here

radium

A toolchain for React component styling.

Subscribe to updates I use radium


Statistics on radium

Number of watchers on Github 6111
Number of open issues 82
Average time to close an issue 4 days
Main language JavaScript
Average time to merge a PR 2 days
Open pull requests 82+
Closed pull requests 86+
Last commit over 1 year ago
Repo Created over 4 years ago
Repo Last Updated over 1 year ago
Size 2.02 MB
Homepage http://formidable...
Organization / Authorformidablelabs
Contributors51
Page Updated
Do you use radium? Leave a review!
View open issues (82)
View radium activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating radium for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

Travis Status AppVeyor Status Coverage Status NPM Package Dependency Status gzipped size

Radium

npm install radium

Radium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS.

Inspired by React: CSS in JS by vjeux.

Overview

Eliminating CSS in favor of inline styles that are computed on the fly is a powerful approach, providing a number of benefits over traditional CSS:

  • Scoped styles without selectors
  • Avoids specificity conflicts
  • Source order independence
  • Dead code elimination
  • Highly expressive

Despite that, there are some common CSS features and techniques that inline styles don't easily accommodate: media queries, browser states (:hover, :focus, :active) and modifiers (no more .btn-primary!). Radium offers a standard interface and abstractions for dealing with these problems.

When we say expressive, we mean it: math, concatenation, regex, conditionals, functionsJavaScript is at your disposal. Modern web applications demand that the display changes when data changes, and Radium is here to help.

For a short technical explanation, see How does Radium work?.

Features

  • Conceptually simple extension of normal inline styles
  • Browser state styles to support :hover, :focus, and :active
  • Media queries
  • Automatic vendor prefixing
  • Keyframes animation helper
  • ES6 class and createClass support

Docs

Usage

Start by wrapping your component class with Radium(), like export default Radium(Component), or Component = Radium(Component), which works with classes, createClass, and stateless components (functions that take props and return a ReactElement). Then, write a style object as you normally would with inline styles, and add in styles for interactive states and media queries. Pass the style object to your component via style={...} and let Radium do the rest!

<Button kind="primary">Radium Button</Button>
import Radium from 'radium';
import React from 'react';
import color from 'color';

class Button extends React.Component {
  static propTypes = {
    kind: PropTypes.oneOf(['primary', 'warning']).isRequired
  };

  render() {
    // Radium extends the style attribute to accept an array. It will merge
    // the styles in order. We use this feature here to apply the primary
    // or warning styles depending on the value of the `kind` prop. Since its
    // all just JavaScript, you can use whatever logic you want to decide which
    // styles are applied (props, state, context, etc).
    return (
      <button
        style={[
          styles.base,
          styles[this.props.kind]
        ]}>
        {this.props.children}
      </button>
    );
  }
}

Button = Radium(Button);

// You can create your style objects dynamically or share them for
// every instance of the component.
var styles = {
  base: {
    color: '#fff',

    // Adding interactive state couldn't be easier! Add a special key to your
    // style object (:hover, :focus, :active, or @media) with the additional rules.
    ':hover': {
      background: color('#0074d9').lighten(0.2).hexString()
    }
  },

  primary: {
    background: '#0074D9'
  },

  warning: {
    background: '#FF4136'
  }
};

Importing Radium

As of v0.22.x, Radium is built as an ECMAScript Modules-first project. We now have a package.json:module entry pointing to our library files with import|export statements instead of CommonJS requires. We still support CommonJS requires with a special package.json:main entry pointing to root index.js to smooth over this transition. The basic takeaways are:

If you are using ESM with webpack or @std/esm with Node.js, imports like the following work fine without any gotchas:

import Radium from 'radium';
import Radium, { Style } from 'radium';

If you are using CommonJS with Node.js or webpack@1 requires work like normal:

const Radium = require('radium');
const { Style } = require('radium');

If you are using CommonJS with webpack@2+, however, you must instead add .default to the root Radium object import:

const Radium = require('radium').default; // CHANGED: Must add `.default`
const { Style } = require('radium');      // Works as per normal

If you cannot change the require statements directly (say Radium is included from a different library your project depends on) you can manually tweak the Radium import in your project's webpack configuration with the following:

resolve: {
  alias: {
    radium: require.resolve("radium/index")
  }
}

which will allow const Radium = require('radium'); to still work. The configuration effectively forces webpack to point to code from package.json:main (which points to /index.js) instead of what is in package.json:module.

Examples

To see the universal examples:

npm install
npm run universal

To see local client-side only examples in action, do this:

npm install
npm run examples

How does Radium work?

Following is a short technical explanation of Radium's inner workings:

  • Wrap the render function
  • Recurse into the result of the original render
  • For each element:
    • Add handlers to props if interactive styles are specified, e.g. onMouseEnter for :hover, wrapping existing handlers if necessary
    • If any of the handlers are triggered, e.g. by hovering, Radium calls setState to update a Radium-specific field on the components state object
    • On re-render, resolve any interactive styles that apply, e.g. :hover, by looking up the element's key or ref in the Radium-specific state

More with Radium

You can find a list of other tools, components, and frameworks to help you build with Radium on our wiki. Contributions welcome!

Contributing

Please see CONTRIBUTING

radium open issues Ask a question     (View All Issues)
  • almost 3 years Bug: Make `package.json:scripts` commands windows compatible.
  • almost 3 years zIndex doesn't work
  • almost 3 years stateless component style getting wrong
  • almost 3 years Does Radium ever use window.matchMedia instead of @media?
  • almost 3 years Any tuto on how to test react component wrapped in Radium?
  • almost 3 years Questions about how simple CSS selectors translate to Radium
  • almost 3 years User Select not prefixing
  • almost 3 years Integration with another component that uses `style`
  • almost 3 years Decorator behavior varies from Component declaration
  • almost 3 years Can not use webpack-server
  • almost 3 years Can I modify _radiumStyleState via an API?
  • almost 3 years Doesn't work with react-router IndexLink
  • almost 3 years Upgrade inline-style-prefixer to 1.0.4 or 2.0.1 will break the style when userAgent=all
  • about 3 years Flexbox broken in Chromium
  • about 3 years Multiple Radium bugs/issues
  • about 3 years SyntaxError using Create React App
  • about 3 years display: flex is changed into display: -moz-box; on firefox 48 mobile
  • about 3 years Use of context causes react-redux performance issue
  • about 3 years Provide 3 interactive states, hover, active, and touchActive
  • about 3 years radium@0.18.1 postinstall?
  • about 3 years Generated CSS Ordering
  • about 3 years Externalizing the Style component
  • about 3 years The Road to 1.0
  • about 3 years We need something like nth-child
  • about 3 years Hover state is true even if element is disabled
  • about 3 years Get flow-bin up to date
  • about 3 years Issue with Keyframes and Style Component
  • about 3 years Radium support ES7 arrow methods
  • about 3 years Add `publishr` for optimal npm and git installation support.
  • about 3 years Radium & unexpected effects on layouts
radium open pull requests (View All Pulls)
  • Update eslint to version 2.0.0 ?
  • Update phantomjs to version 2.1.1 ?
  • Update phantomjs to version 2.1.3 ?
  • now works with Components that accept Observable as children
  • lodash.merge@4.0.4 breaks build ?
  • Update flow-bin to version 0.21.0 ?
  • babel-eslint@4.1.7 breaks build ?
  • Update karma-phantomjs-launcher to version 1.0.0 ?
  • Add TestMode
  • Update phantomjs to version 2.1.2 ?
  • Update node-libs-browser to version 1.0.0 ?
  • Update babel-preset-es2015-loose to version 7.0.0 ?
  • Update flow-bin to version 0.22.1 ?
  • Update inline-style-prefixer to version 1.0.1 ?
  • babel-plugin-transform-es2015-modules-commonjs@6.6.0 breaks build ?
  • Update inline-style-prefixer to version 1.0.0 ?
  • Update eslint-plugin-flow-vars to version 0.2.1 ?
  • Update eslint-plugin-flow-vars to version 0.2.0 ?
  • Update eslint-plugin-react to version 4.1.0 ?
  • Update flow-bin to version 0.22.0 ?
  • Update eslint-plugin-react to version 4.0.0 ?
  • Update eslint to version 2.2.0 ?
  • babel-loader@6.2.3 breaks build ?
  • karma-mocha-reporter@1.1.6 breaks build ?
  • Update babel-eslint to version 5.0.0 ?
  • Update concurrently to version 2.0.0 ?
  • lodash.merge@4.2.0 breaks build ?
  • Accept other StyleKeepers
  • Make media query and :visited CSS rules unique
  • Handle (active) states for touch devices
  • Update flow-bin to version 0.24.1 ?
  • Add support to 'disabled' prop
  • Add & to support referencing scopeSelector
  • Update concurrently to version 2.1.0 ?
  • Update flow-bin to version 0.24.2 ?
  • Update flow-bin to version 0.26.0 ?
  • quote values for content property
  • babel-preset-react@6.11.1 breaks build ?
  • babel-preset-react@6.11.0 breaks build ?
  • karma-mocha@1.1.1 breaks build ?
  • karma-mocha@1.1.0 breaks build ?
  • Update babylon to version 6.8.2 ?
  • express-http-proxy@0.7.2 breaks build ?
  • color@0.11.3 breaks build ?
  • karma-phantomjs-launcher@1.0.1 breaks build ?
  • babel-eslint@6.1.0 breaks build ?
  • Update eslint to version 3.1.1 🚀
  • Update flow-bin to version 0.29.0 🚀
  • Update inline-style-prefixer to version 2.0.1 🚀
  • react-dom@15.2.0 breaks build 🚨
  • Update express-http-proxy to version 0.9.1 🚀
  • Update mocha to version 3.0.1 🚀
  • Update eslint-plugin-react to version 6.0.0 🚀
  • Update eslint to version 3.2.2 🚀
  • Update eslint to version 3.2.1 🚀
  • Update express-http-proxy to version 0.9.0 🚀
  • Update mocha to version 3.0.0 🚀
  • Update flow-bin to version 0.30.0 🚀
  • Update eslint to version 3.2.0 🚀
  • lolex@1.5.1 breaks build 🚨
  • sinon@1.17.5 breaks build 🚨
  • karma-coverage@1.1.1 breaks build 🚨
  • Update express-http-proxy to version 0.8.0 🚀
  • Update documentation site link in docs/README.md
  • Update flow-bin to version 0.32.0 🚀
  • karma-phantomjs-launcher@1.0.2 breaks build 🚨
  • Update express-http-proxy to version 0.10.0 🚀
  • Update flow-bin to version 0.31.1 🚀
  • Update flow-bin to version 0.31.0 🚀
  • Switch StyleKeeper PropType check from instanceof to duck-typing
  • let `.babelrc` not be added to package
  • Update flow-bin to version 0.33.0 🚀
  • Force Use Media Query Styles
  • Update dependencies to enable Greenkeeper 🌴
  • Update flow-bin to version 0.34.0 🚀
  • fix: Use React.PureComponent to avoid unnecessary rendering
  • Import PropTypes from a separate module
  • Task use prop types
  • Use prop-types to access PropTypes
  • jsxstyle supports pseudo elements now
  • Handle multiple animationName props
  • Support ES7 arrow functions on React classes.
radium questions on Stackoverflow (View All Questions)
  • React Radium - How to change property values dynamically
  • Radium (React) - passing style values as props
  • react-router, radium and server side rendering - Warning: react checksum was invalid
  • How to use Radium in TypeScript?
  • Radium error - Unknown plugin "flow-comments"
  • Why Radium doesn't work with Reagent (Clojurescript)?
  • ReactJS, Radium, AltJS - Uncaught TypeError: Cannot read property 'toString' of undefined
  • The best way to get nearest street view by using getPanoramaByLocation with radium larger than 50 meters
  • How to change font size in radium
radium list of languages used
Other projects in JavaScript