0.1.0 • Published 9 years ago
react-rich-text-template v0.1.0
react-rich-text-template
Text templates parameterized with react components
Why?
Sometimes you need to insert components into strings comes from i18n module.
For example: "Hey, {username}, checkout your profile"
Usage
var rrtt = require('react-rich-text-template');
var template = rrtt.compile(
"Hey, {username}, checkout your <profileLink>profile<profileLink>"
);
template({
username: "anmi",
profileLink: text => <profileLink>{text}</profileLink>
});
/*
["Hey, anmi, checkout your ", <profileLink>profile</profileLink>]
*/
You can redefine string wrapper and set key prop to speedup react elements merge
var rrtt = require('react-rich-text-template');
var opts = Object.create(rrtt.defaultConfig);
opts.stringWrapper = (string, index) =>
<span key={index}>{string}</span>
var template = rrtt.compile('template with<foo>multiple</foo>elems', opts)
template({
foo: (children, index) =>
<Foo key={index}>{children[0]}</Foo>
});
/* =>
[
<span key=0>template with</span>,
<Foo key=1>
<span key=0>multiple</span>
</Foo>
<span key=2>elems</span>
]
*/
Define processMissingParam to handle missing params.
var rrtt = require('react-rich-text-template');
var opts = Object.create(rrtt.defaultConfig);
opts.processMissingParam =
function(paramName, children, index) {
return <MissingTag>Missing tag: paramName</MissingTag>
};
var template = rrtt.compile('Tag is <em>missing</em>');
template({});
/* =>
[
'Tag is ',
<MissingTag>Missing tag: em</MissingTag>
]
*/