Radium

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

npm install radium

Why Radium

Radium unlocks the power of React & inline styling by enabling support for CSS pseudo selectors, media queries, vendor-prefixing, and much more through a simple interface.

<Button
  kind="primary" // try changing this to "warning"
  disabled={false}
  styles={{
    base: {
      padding: "1.5em 2em",
      border: "0px",
      cursor: "pointer",
      fontSize: "1rem",
      fontWeight: 700,
    },
    primary: {
      backgroundColor: "#0074D9",
      color: "#ffffff",
      ":hover": {
        backgroundColor: color("#0074d9").lighten(0.2).hexString()
      }
    },
    warning: {
      backgroundColor: "#F5A623",
      color: "#ffffff",
      ":hover": {
        backgroundColor: color("#F5A623").darken(0.2).hexString()
      }
    },
    disabled: {
      opacity: .4,
      cursor: "not-allowed"
    }
  }}
>
Radium Button
</Button>

Radium Features & Functionality

  • 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

Advantages of Inline Styles

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

To learn more about CSS in JS and the inspirations behind this library, check out React: CSS in JS by vjeux

Getting Started with Radium

To install the stable version of Radium:

npm install --save radium

This assumes you are using npm as your package manager. If you don’t, you can access these files on npmcdn or point your package manager to them.

Next, wrap Radium() around your component, like module.exports = 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!

// import React from 'react';
// import ReactDOM from 'react-dom';
// import Radium from 'radium';

class Alert extends React.Component {
  getStyles() {
    const status = {
      notification: "#0074D9",
      success: "#27AE60",
      error: "#E74C3C"
    }

    return {
      alert: {
        position: "relative",
        width: "100%",
        padding: "5px",
        borderRadius: "3px",
        backgroundColor: status.notification,
        color: "white",
        textAlign: "center",
        fontFamily: "'Helvetica Neue', sans-serif",
        success: {
          backgroundColor: status.success
        },
        error: {
          backgroundColor: status.error
        }
      },
      closeButton: {
        position: "absolute",
        right: "10px",
        color: color(status[this.props.type]).lighten(0.2).hexString(),
        ":hover": {
          color: color(status[this.props.type]).lighten(0.5).hexString(),
          cursor: "pointer"
        }
      }
    };
  }
  render() {
    const styles = this.getStyles();
    const { type, message } = this.props;
    return (
      <div style={[styles.alert, styles.alert[type]]}>
        { message }
        <span style={styles.closeButton}>&#x2715;</span>
      </div>
    );
  }
}

Alert.defaultProps = { type: "notification" };

const Component = Radium(Alert);

ReactDOM.render(<Component message="This is an alert component" />, mountNode);

Documentation

Find guides, explore examples, and reference our API documentation.

Radium® is a trademark of Formidable Labs, Inc.