Using 'material-ui' with react-rails gem?

Question

I would like to use the material-ui component library in my Rails 4 app. I am currently using the react-rails gem to add .jsx compilation to the asset pipeline. I have added

Answer 1

Ok so here is what I have working so far...

to the gemfile I have added:

gem 'react-rails'
gem "browserify-rails"

This gives us our react library, helpers and jsx compilation as well as the ability to use the require() sytax to require modules in our JS. browserify-rails also allows us to require npm modules in your Rails assets via a package.json file.

We can add the material-ui library to our app via this package.json file...

"dependencies" : {
    "browserify": "~> 10.2.4",
    "browserify-incremental": "^3.0.1",
    "material-ui": "0.13.1"
  },

The material ui library uses the require syntax to join all the different jsx component files together in the right order so this is why we need to use browserify-rails.

Next to keep our react code together I made a new directory in asset/javascripts called /react...

react
    L /components
    L react.js
    L react-libraries.js
    L theme.js

Now as part of 'material-ui' dependencies we have the react library. This means at the moment we have two copies of the library. One from the 'react-rails' gem and one from the 'material-ui' library dependencies from 'browserify-rails'. Lets use the one from 'material-ui' dependencies and leave the one from 'react-rails'.

in react.js:

//= require ./react-libraries
//= require react_ujs
//= require_tree ./components

Then in react-libraries.js

//React Library
React = require('react');
//Material Design Library
MaterialUi = require('material-ui/lib');
injectTapEventPlugin = require('react-tap-event-plugin'); injectTapEventPlugin();
//Material Design Library Custom Theme
MyRawTheme = require('./theme');
ThemeManager = require('material-ui/lib/styles/theme-manager');

Then we want to include all of this in the asset pipeline with...

//= require react/react

in application.js.

Now you can write your components in jsx files in /react/components/ You may also want to namespace your components with...

//Custom Components Namespace
Components = {};

in react-libraries.js

You can customise your theme in theme.js like this...

Colors = require('material-ui/lib/styles/colors');
ColorManipulator = require('material-ui/lib/utils/color-manipulator');
Spacing = require('material-ui/lib/styles/spacing');

module.exports = {
  spacing: Spacing,
  fontFamily: 'Roboto, sans-serif',
  palette: {
    primary1Color: Colors.grey300,
    primary2Color: Colors.grey300,
    primary3Color: Colors.lightBlack,
    accent1Color: '#01A9F4',
    accent2Color: Colors.grey100,
    accent3Color: Colors.grey500,
    textColor: Colors.darkBlack,
    alternateTextColor: Colors.white,
    canvasColor: Colors.white,
    borderColor: Colors.grey300,
    disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3)
  }
};

Hope that helps :)