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.