dust-react
v2.0.0
Published
Dust helper to render react components
Downloads
2
Readme
dust-react
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
Module Definition
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 doingrequire('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;
Usage
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)
| Option | Type | Description |
| --- | --- | --- |
| requireFn | Function | Required - The require function based on the environment |
| globalContext | Object | Required - The global context object (global
in Node.js and window
in the browser) |
| componentDir | String | Optional - An absolute path for requiring components in Node.js |
Example
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')
});
Helper
Params
| Param | Type | Description |
| --- | --- | --- |
| component | String |Required - the path to require the module |
| props | Object | optional - Properties to be passed to React.createElement
|
| namedExport | String | optional - Uses the default export if not specified |
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
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 });
Named Exports
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
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
Relative Paths -- Node.js vs AMD
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
.
Tests
The tests are written in Jest.
npm test