handlebars-react

Compile Handlebars templates to React.

Compile this:

<div>
	text1
	{{variable1}}
	{{#if variable2}}<span>text2</span>{{else}}text3{{/if}}
	<span data-attr="{{#if variable3}}value1{{/if}} value2">text4</span>
</div>

into this:

React.DOM.div(null,
	"text1",
	this.props.variable1,
	this.props.variable2 ? React.DOM.span(null,
		"text2"
	) : "text3",
	React.DOM.span({"data-attr":(this.props.variable3 ? "value1" : "") + " value2"},
		"text4"
	)
);

Installation

Node.js >= 0.10 is required. Type this at the command line:

npm install handlebars-react --save-dev

Usage

Server/Browserify

var HandlebarsReact = require("handlebars-react");

new HandlebarsReact(options)
.compile("<h1>{{title}}</h1>")
.then( function(result) {
	console.log("done!");
});

UMD/AMD/etc

Accessible via define() or window.HandlebarsReact.

Options

options.beautify

Type: Boolean
Default value: false
When true, output will be formatted for increased legibility.

options.env

Type: String
Default value: undefined
Option presets for your target environment: "development" or "production". Preset options can be overridden.

options.normalizeWhitespace

Type: Boolean
Default value: false
See handlebars-html-parser.

options.processCSS

Type: Boolean
Default value: false
See handlebars-html-parser.

options.processJS

Type: Boolean
Default value: false
See handlebars-html-parser.

options.useDomMethods

Type: Boolean
Default value: false
When true, available React.DOM convenience functions will be used instead of React.createElement().

Roadmap Features

• make dom-style-parser use postcss instead of cssparse?
• support <template>
• convertHbsComments to JavaScript block comments (or HTML comments?)
• convertHtmlComments to JavaScript block comments
• ignoreComments option when React supports such (react#2810)
• trimWhitespace option to remove spaces between elements (<tag> a word <tag> to <tag>a word<tag>)?

Changelog

• 0.0.1–0.0.15 pre-releases