Radium

Radium is a toolchain for handling modifiers, states, computed styles and responsive styles when working with inline styles in react components (at Formidable, we call this component styling because styles are specific to, and scoped to, the component rather than in external style sheets). Radium allows you to handle complex component styling in a declarative, easy to write way. Component styling in React provides a number of benefits over traditional CSS:

• Scoped styles, meaning no more global variables
• Avoids specificity conflicts
• Source order independence
• Dead code elimination
• Highly expressive

Inspired by React: CSS in JS by Christopher Chedeau.

Docs

• Guides
  • Overview
  • Media Queries
  • Computed Styles
• API Docs

What does it look like?

Start by writing a style object with a combination of default styles, browser states, media queries, and modifiers. Pass the object to this.buildStyles() and Radium will determine the correct group of style rules to apply to your component.

render: function () {
  var styles = {
    padding: '1.5em',
    borderRadius: 4,
    font-size: window.devicePixelRatio === 2 ? "16px" : "14px",
    height: function () {
      return window.innerWidth / 2 + "px";
    },

    states: [
      { hover: { color: '#fff' }},
      { focus: { boxShadow: '0 0 0 5px'}}
    ],

    mediaQueries: [
      { small: { margin: 10 }},
      { large: { margin: 30 }}
    ],

    modifiers: [
      {
        type: {
          primary: { background: '#0074D9' },
          warning: { background: '#FF4136' }
        }
      }
    ]
  };

  return (
    <div style={this.buildStyles(styles)} />
  );
}

For more in-depth usage, see the overview guide.

Examples

To see local examples in action, do this:

npm install
npm run examples