react-mustache-component

react-mustache-template-component - React Mustache Template Component

The Template component that uses Mustache.js to render the a component, sanitized by dompurify.

Demo

See Storybook for examples.

Installation and Usage

$ npm install react-mustache-template-component

The use it in your app:

import TemplateComponent from 'react-mustache-template-component'

...
const template = `<img class="img" src="{{url}}" />`;
const data = { url: 'http://example.com/img' };

<TemplateComponent template={template} data={data} />

This will be rendered as

<div><img class="img" src="http://example.com/img" /></div>

Notes

• Input is properly sanitized by dompurify. This can be switched off (... sanitize={false} ...) but is highly discouraged, as this might introduce XSS issues

Props

Props that are used:

Name	Required	Type	Default	Comments
template	Yes	string	-	Mustache template string that is used in your template component
data	No	object	{}	Data used by Mustache to replace placeholders (marked by {{}})
type	No	string	"div"	Type of container. Can be "div" or "span"
sanitize	No	boolean	true	Sanitize the result using dompurify
sanitizeOptions	No	object	{}	Sanitation can be changed by Dompurify.Config options
className	No	string	""	Class name of container
style	No	object	{}	Extra style options for the container
onClick	No	function	void	OnClick handler, executed when clicking on the container
onDblClick	No	function	void	OnDoubleClick handler, executed when double clicking on the container

Development

To install dependencies

$ npm install

To build

$ npm run build

To run tests

$ npm run test

To run Storybook

$ npm run storybook

License

MIT Licensed. Copyright (c) Jelte Lagendijk 2020.