React-winjs NPM

react-winjs

A React wrapper around WinJS's controls. Implemented using the technique described on this WinJS wiki page.

Live demos:

Showcase (source): shows an example usage of each component.
Movies (source): demonstrates a couple of react-winjs components in a small app for looking up movies.
Address Book (source): demonstrates how to use react-winjs components to build an adaptive app which works well on mobile, tablet, and desktop computers.

Installation

npm install react-winjs --save

Usage

Include WinJS 4.4 on your page. For example:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/css/ui-dark.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/js/base.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/js/ui.js"></script>

Then require react-winjs and use it:

var React = require('react');
var ReactDOM = require('react-dom');
var ReactWinJS = require('react-winjs');

var App = React.createClass({
  render: function () {
    return <ReactWinJS.Rating maxRating={3} />;
  }
});

ReactDOM.render(<App />, document.getElementById("app"));

See the documentation and examples for more details.