A dust helper to render React components.

Features:

• Server & client rendering (using requireJS on the client)
• Allows passing React props as variadic or explicit params
• Gracefully fails on rendering errors

dust-react provides the following ways of importing:

• Pre-compiled ES5 code for use in non-babel'd projects (dust-react/lib, which is also the main entry point when doing require('dust-react'))
• UMD module for use in the browser (dust-react/dist)

The module is the default export. If you're using CommonJS without babel transpiling import/exports, you'll need to explicitly reference the default export.

const dustHelperReact = require('dust-react').default;

dust-react works in both Node.js and AMD environments. Configuring the helper based on the environment allows loading modules in both contexts.

dustHelperReact(options: object)

import dust from 'dustjs-linkedin';
import dustHelperReact from 'dust-react';
import path from 'path';

dust.helpers = dust.helpers || {};
dust.helpers.react = dustHelperReact({
  requireFn: require,
  globalContext: global,
  componentDir: path.resolve(__dirname, '../component')
});

The helper requires a reference to a react component as a string. This is what is used with the require function passed in when creating the helper.

<div id="module-mount">
  {@react component="react-module" props=. /}
</div>

This equates to a require statement that looks like the following:

require('react-module');

(Note about AMD - all modules are loaded asynchronously, and the rjs optimizer is not yet supported)

Props can also be variadic, allowing you to pass in params to the helper that become React props.

<div id="module-mount">
  {@react component="react-book" title='Boop' pages=10 /}
</div>

This is equivalent to:

React.createElement(ReactBook, { title: 'boop', pages: 10 });

By default, dust-react will use the default export of the module. You can optionally specify a named export as well.

<div id="module-mount">
  {@react component="react-module" namedExport="example" props=. /}
</div>

This is equivalent to:

const component = require('react-module').example;

// or in ES6

import { example } from 'react-module';

Component paths can be either a relative path or a package path.

• Relative path: ./local-component/example (must start with a dot-slash)
• Package path: some-npm-module

Under the hood, every path to a component for AMD becomes a package path. Passing in a relative path will result in requiring the module without the ./. This allows you to reference a local file for rendering server-side and reference the same file from your RequireJS baseUrl.

The tests are written in Jest.

npm test