React Mustache Template Component

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

Demo

See Storybook

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 any HTMLElement, like div, span, i etc | |sanitize|No|boolean|true|Sanitize the result using dompurify| |sanitizeOptions|No|object|{}|Sanitation can be changed by Dompurify.Config options|

Besides these props, it can also use all basic HTML attributes, like className, style, id, etc.

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.