hammer-react.js

var Page = React.createFactory(React.createClass({
  render: function () {
    return React.DOM.div(
      {style: {width: "100%", height: "100%", position: "absolute", left: (100 * this.props.idx).toString() + "%"}},
      this.props.children);
  }
}))

var PagingSrollView = React.createFactory(React.createClass({
  componentDidMount: function () {
    var el = ReactDOM.findDOMNode(this);
    // TODO: Add event listeners. Invoke this.props.setX(123);
  },
  
  componentWillUnmount: function () {
    var el = ReactDOM.findDOMNode(this);
    // TODO: Unhook event listeners
  },
  
  render: function () {
    return React.DOM.div(
      {style: {width: "100%", overflow: "hidden"}},
      React.DOM.div(
        {style: {transform: "translateX(" + this.props.x + ")"}},
        Page({idx: 0}, "Page 1"),
        Page({idx: 1}, "Page 2"),
        Page({idx: 2}, "Page 3"),
        Page({idx: 3}, "Page 4")))
  }
}))

var targetEl = document.getElementById("main");

var x = 0;

var animationFrameId;
function setX(newX) {
  clearAnimationFrame(animationFrameId);
  animationFrameId = requestAnimationFrame(function () {
    x = newX;
    doRender();
  })
}

function doRender() {
  ReactDOM.render(PagingSrollView({setX: setX, x: x}), main);
}
doRender();