React CSS with Radium, React D3 Components

2015-02-27 00:00:00 +0000 by Alex R. Young


Ken Wheeler sent in Radium (GitHub: FormidableLabs/radium, License: MIT, npm: radium) from Formidable Labs. Radium is a module for managing inline styles on React elements, allowing you to use CSS features that aren't usually possible with inline styles.

You can use modifier styles based on component props, media queries, and handle pseudo classes.

Radium offers a standard interface and abstractions for dealing with these problems.

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

Radium provides a mixin called StyleResolverMixin which will generate the styles that you want to add to a component. The style objects it uses look like this:

var radStyles = {
  padding: '1.5em',
  border: 0,
  borderRadius: 4,
  background: 'blue',
  color: 'white'

You can then call this.buildStyles in the render method, and add the styles to the style attribute. Radium also supports modifiers -- CSS properties that are applied based on the component's props and state. Take a look at the getting started guide to learn more.

Ken also mentioned React: CSS in JS by Christopher Chedeau, who works at Facebook in the front-end infrastructure team.

React D3 Components

React 3D Components

react-d3-components (GitHub: codesuki/react-d3-components, License: MIT, npm: react-d3-components) by Neri Marschik is a library for working with D3 in React. Imagine being able to include elements like BarChart in your render methods, which generates charts based on the ReactD3.BarChart class.

You can even add tooltips and CSS classes. The project's readme includes lots of charts, but not every D3 chart is supported yet. The author is also working on animations.

I much prefer the idea of giving D3 charts some added structure with React -- usually my D3 code ends up a little bit on the less maintainable side!