Skip to content

j3lte/react-mustache-template-component

Repository files navigation

npm License GitHub Bugs GitHub issues GitHub last commit GitHub Workflow Status Codecov npm type definitions DeepScan grade contributions welcome Known Vulnerabilities Bundlephobia

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.