Radium: A toolchain for React component styling

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

Nishit Maheta
Nov 14 · 2 min read

Install

yarn add radium
# or
npm install --save radium

Usage

<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'
}
};

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

Github

JavaScript in Plain English

Learn the web's most important programming language.

Nishit Maheta

Written by

Technology Lead At Mobio Solutions. http://mobiosolutions.com/. Follow me on https://www.linkedin.com/in/nishit-mehta/

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade