Noteworthy Programming Masterpiece

    react-pjax

    1.0.0 • Public • Published

    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.

    Install

    npm i react-pjax

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • tngan