Fluxer

Build React/Flux app that runs seamlessly on both server side and client side

Usage

var appName: a string like 'my-app';
var appComponent: MyReactComponentToRender
var data: DataNeededToInitialize appComponent

server side

var fluxer = require('fluxer');
var markup = fluxer(appName, appComponent, data)

place markup in your favorite template, markup has format like this

<div id='{appName}-container'>
  React rendered appComponent
</div>
<script type='application/json' id='{appName}-data-script'>
  json serialized data
</script>

client side

var fluxer = require('fluxer')(document);
fluxer.render(appName, Component);

with react-router

// define your routes

var routes = (
  <Route handler={appComponent} path="/">
);


// on server side

var fluxer = require('fluxer');
var Router = require('react-router');

Router.run(routes, url, function(Handler) {
  res.send(fluxer(appName, Handler, data));
});


// on client side

var fluxer = require('fluxer')(document);
var Router = require('react-router');

var initData = fluxer.getInitData(appName);
var mountNode = fluxer.getMountNode(appName);

Router.run(Routes, Router.HistoryLocation, function(Handler) {
  React.render(<Handler ...initData />, mountNode);
});

install

With npm do:

npm install --save fluxer

license

MIT