Moq UI

Moq UI is a set of simple and extensible user interface components built with React.

It borrows from the Material UI project in terms of code organization, but provides only a minimal theme and a few components.

Setup this project

$ git clone https://bitbucket.org/miksula/moq-ui.git
$ cd moq-ui/
$ npm install

Run tests

Run command line test suite with:

$ npm test

View examples

In order to run and view the examples npm install serve -g and:

$ npm run examples

Now you can browse the examples/ folder (this assumes the serve command to be available globally.)

Watch for changes

To watch for (and build) changes:

$ gulp watch

This is used to build the applications inside the examples/ directory.

Install from npm

$ npm install moq-ui --save

Include components

Once moq-ui is installed, you can include components easily:

/** CustomButton.jsx */

var React = require('react'),
  moq = require('moq-ui'),
  Button = moq.Button;

var CustomButton = React.createClass({

  render: function() {
    return (
      <Button label="Click me!" />
    );
  }

});

module.exports = CustomButton;

In order to use non-default theme utilize the ThemeManager and set the 'uiTheme' context type:

var React = require('react'),
  moq = require('moq-ui'),
  Button = moq.Button,
  ThemeManager = moq.Styles.ThemeManager;

var CustomButton = React.createClass({

  childContextTypes: {
    uiTheme: React.PropTypes.object
  },

  getChildContext: function() {
    var type = ThemeManager.types['PURE'];

    return {
      uiTheme: new ThemeManager().setTheme(type)
    };
  },

  render: function() {
    return (
      <Button label="Hello world!" primary={true} />
    );
  }
 
});

module.exports = CustomButton;