react-pjax

Simple middleware of PJAX implementation with ReactJS

Semantics

This module provides a solution for how to use PJAX with ReactJS, when a request with custom PJAX header is received, only state will be returned for partial update without server-side rendered markup. If it is not a PJAX request, markup and state will be returned together.

Install

$ npm install react-pjax

API

var reactPjax = require('react-pjax');

reactPjax(options)

Create a new middleware with the options as follow.

Options

The module accepts these properties in the options object.

reqHeader (optional)

The header name to identify whether it is a PJAX request. Default is 'X-REACT-PJAX'.

reactStateTag (optional)

The property name of state in the returned object inside res.send() and res.render(). Default is 'reactState'.

reactMarkupTag (optional)

The property name of markup in the returned object inside res.send() and res.render(). Default is 'reactState'.

Usage

There are currently two methods, res.pjaxJson and res.pjaxRender.

res.pjaxJson(reactElement,reactState,meta)

It returns a JSON.

reactElement

React element. It is defined by var MyReactElement = React.createFactory(require('MyReactComponent'));

reactState

React state in JSON format. It is used in server side rendering (SSR). e.g. React.renderToString(MyReactElement(reactState));

meta (optional)

Meta is an object with properties. (e.g. title)

res.pjaxRender(view,reactElement,reactState,meta)

Render your view with passing markup and state, sends the rendered HTML to client side.

view

Name of view.

Example

Application entry point (index.js)

var reactPjax = require('react-pjax');
var express = require('express')
 
var app = express();
 
app.use(reactPjax({
    reqHeader: 'using-pjax',
    reactStateTag: 'myReactState',
    reactMarkupTag: 'myReactMarkup'
}));
 
/**
 * or using default setting
 *
 * app.use(reactPjax());
 */

Controller handles the request and response

var MyReactElement = React.createFactory(require('MyReactComponent'));
 
app.get('/', function(req, res) {
    res.pjaxRender('index', MyReactElement, myReactState, {
        title: 'home'
    });
});
 
app.get('/json', function(req, res) {
    res.pjaxJson(MyReactElement, myReactState, {
        foo: 'bar'
    });
});

View (index.dust)

{>"layouts/master" /}
{body}
    {markup|s}
    <script type="application/json" id="reactState">{reactState|s}</script> 
{/body}

reactState is the reactStateTag and markup is the reactMarkupTag.

License

MIT

Copyright

Copyright (C) 2015 Tony Ngan, released under the MIT License.